QA Mustn’t Live on DevTools Alone: Discover Browser Tools You Never Knew Existed

Browser Internals

It might seem that a web browser, aside from Developer Tools and internet access, doesn’t hold much of interest for QA. Many assume that the essential tools for QA work must be installed as extensions or separate programs. However, there are several underrated internal tools within the browser that can significantly enhance the daily workflow of QA professionals. Here’s a look at some of these hidden gems that many are unaware of:

Capturing and Analyzing Network Traffic Directly from the Browser with chrome://net-export

When you need to capture network traffic from one or a few tabs in your browser, you don’t need third-party tools like Fiddler or Wireshark. Chrome’s built-in net-export feature is simple and efficient:

1. Navigate to chrome://net-export
2. Click “Start Logging to Disk”
3. Choose the location and name for your captured file data, which will be saved in a JSON format
4. Once you’re done testing, press “Stop Logging to Disk”

To read the captured data, open the JSON file with your preferred reader or use the NetLog Viewer. Import your JSON file into NetLog Viewer to view events, requests, data usage, a detailed timeline with the sequence and duration of network events, errors, warnings, and more. The Timeline Tab also offers visualization options.

Timeline Tab

Events

System Diagnostics at Your Fingertips with chrome://system

This tool is a great diagnostic asset for tech support. By visiting chrome://system, users can provide detailed information about their browser version, OS, hardware, installed extensions, system logs, command line switches, memory usage, and network configurations, including proxy settings. This can be invaluable for diagnosing issues without needing additional tools.

Identifying Conflicts with Third-Party Modules on chrome://conflicts

This page helps diagnose conflicts caused by third-party modules (such as DLLs on Windows) that are loaded into the browser’s process. If you encounter conflicting software on your system, updating, disabling, or uninstalling it might resolve the issue. If the module’s software is unclear, searching for the library name online can help.

Detailed Performance Tracing on chrome://tracing

Developer Tools tracing is great, but sometimes you need to go deeper. chrome://tracing captures low-level browser activity, enabling detailed analysis of performance bottlenecks. Here’s how to use it effectively:

1. Navigate to chrome://tracing: The default “Web developer” option usually suffices. In Extra Categories, consider blink.debug for slow CSS selector stats and blink.user_timing for timing metrics
2. Click “Record.” Perform the action you want to record (e.g., load a page, click a button)
3. When done, switch back and click “Stop

Use ‘w’ and ‘s’ to zoom

If you need to start tracing immediately after the browser starts, use these flags:

--trace-startup --trace-startup-file=_tracing.json --trace-startup-duration=10

This will record the first 10 seconds of Chrome’s lifetime into _tracing.json.

I have found the chrome://tracing feature useful for identifying what happens during periods when dropped frames correlate with no active JavaScript tasks.

Best Practices:

Limit Recording Duration: Restrict recordings to a maximum of 10 seconds to prevent potential page/memory crashes.

Monitoring Performance Metrics Over Time with chrome://histograms

This tool provides detailed performance metrics, useful for identifying and analyzing specific events. For example, when user used a ‘Print’ option in browser histograms might show:

PrintPreview.InitialDisplayTime: Time for the initial display of the print preview.

PrintPreview.InitializationTime: Time to initialize the print preview.

PrintPreview.NumberOfPrinters: Number of printers available.

PrintPreview.PrintDocumentType: Type of document being printed.

PrintPreview.PrintSettings: Various print settings used.

PrintPreview.PrintSettingsUi: User interactions with print settings UI.

PrintPreview.RenderAndGeneratePDFTime: Time to render and generate a PDF.

PrintPreview.RenderAndGeneratePDFTimeAvgPerPage: Average time per page to render and generate a PDF.

PrintPreview.RenderToPDFTime: Time to render to PDF.

PrintPreview.TransitionedToReadyState: Time to transition to ready state.

PrintPreview.UserAction: User actions during print preview.

Each histogram provides insights into different aspects of the print preview process, helping to pinpoint performance bottlenecks and user interaction issues.