Problems in accessing websites can often be found and fixed if the network traffic between the browser and the website is captured as the problem occurs. This short post explains how to capture such logs.
Capturing Network Traffic Logs
If someone asked you to read this post, chances are good that you were asked to capture a web traffic log to track down a bug in a website or your web browser.
Fortunately, in Google Chrome or the new Microsoft Edge (version 76+), capturing traffic is simple:
- Optional but helpful: Close all browser tabs but one.
- Navigate the tab to about://net-export
- In the UI that appears, press the Start Logging to Disk button.
- Choose a filename to save the traffic to. Tip: Pick a location you can easily find later, like your Desktop.
- Reproduce the networking problem in a new tab. If you close or navigate the //net-export tab, the logging will stop automatically.
- After reproducing the problem, press the Stop Logging button.
- Share the Net-Export-Log.json file with whomever will be looking at it. Optional: If the resulting file is very large, you can compress it to a ZIP file.
In some cases, especially when you dealing with a problem in logging into a website, you may need to set either the
Include cookies and credentials or
Include raw bytes options before you click the Start Logging button.
Note that there are important security & privacy implications to selecting these options– if you do so, your capture file will almost certainly contain private data that would allow a bad actor to steal your accounts or perform other malicious actions. Share the capture only with a person you trust and do not post it on the Internet in a public forum.
If you’re more of a visual learner, here’s a short video demonstrating the traffic capture process.
In a followup post, I explore how developers can analyze captured traffic.
Appendix A: Capture on Startup
In rare cases, you may need to capture network data early (e.g. to capture proxy script downloads and the like. To do that, close Edge, then run:
If you want to capture unsanitized cookies and authentication headers, but not the response bodies, use
--net-log-capture-mode=IncludeSensitive instead. Omit the final parameter entirely if you do not want to include the raw data and want just the “Strip Private Information” mode of capture.
Note: This approach also works for Electron JS applications like Microsoft Teams:
Note: This will only capture the network traffic from the Chromium layer of Electron apps (e.g. web requests from the nodeJS side will not be captured) but it still may be very useful.
WebView2-based applications can either pass the
--log-net-log command line into the WebView2 to initiate the capture, or they can add a second WebView control to their application (in the same context) and navigate it to
about:net-export to allow the debugging user to manually trigger logging.
Appendix B: Limitations
No POST Data
One important shortcoming in the current NetLog file format is that it does not contain any request body data, even if you select the “Include Raw Bytes” option. If you need the request body data, you may need to collect a HTTP Archive (HAR) file instead.
- Hit F12 to open the Developer Tools.
- Activate the Network tab.
- Ensure the recording button at the top of the tab is red
- Tick the Preserve log checkbox.
- Reproduce the problem
- Right-click entries in the the grid and choose Save all as HAR with content
- Share the HAR file only with a person you trust and do not post it on the Internet in a public forum.
Alternatively, you might just capture the traffic using Fiddler.
Doesn’t Capture IE Mode
Pages running in Edge’s IE Mode tabs are loaded using URLMon and WinINET, the Windows Network Stacks used by Internet Explorer. Because this traffic does not go through the Chromium Network Stack, it is not recorded in NetLogs.
To work around this problem, you’re probably best off just capturing the traffic using Fiddler.