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 chrome://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
msedge.exe --log-net-log=C:\some_path\some_file_name.json --net-log-capture-mode=IncludeSocketBytes
Note: This approach also works for Electron JS applications like Microsoft Teams:
I suspect that this is only going to 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.
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.