How to Collect a Network Trace in the Browser

Most browser Developer Tools have a "Network" tab that allows you to capture network activity between the browser and the server.

Google Chrome

To capture a detailed network trace using your browser's DevTools, follow these steps:

1. Open the Chrome DevTools:

   • Select F12
   • Select Ctrl+Shift+I (Windows/Linux) or Command+Option+I (macOS)
   • Select Customize and control Google Chrome and then More Tools > Developer Tools

2. Select the Network Tab

3. Refresh the page (if needed) and reproduce the problem

4. Select the Export HAR... in the toolbar to export the trace as a "HAR" file

   

To capture a detailed network trace using your browser's DevTools, follow these steps:

1. Open the Firefox Developer Tools:

   • Select F12
   • Select Ctrl+Shift+I (Windows/Linux) or Command+Option+I (macOS)
   • Select Open menu and then Web Developer > Toggle Tools

2. Select the Network Tab

3. Refresh the page (if needed) and reproduce the problem

4. Right-click anywhere in the list of requests and choose "Save All As HAR"

   

To capture a detailed network trace using your browser's DevTools, follow these steps:

1. Open the Web Development Tools:
   • Select Command+Option+I
   • Select Developer menu and then select Show Web Inspector
2. Select the Network Tab
3. Refresh the page (if needed) and reproduce the problem
4. Right-click anywhere in the list of requests and choose "Save All As HAR"

To capture a detailed network trace using your browser's DevTools, follow these steps:

1. Open the DevTools:

   • Select F12
   • Select Ctrl+Shift+I (Windows/Linux) or Command+Option+I (macOS)
   • Select Settings and more and then More Tools > Developer Tools

2. Select the Network Tab

3. Refresh the page (if needed) and reproduce the problem

4. Select the Export HAR... in the toolbar to export the trace as a "HAR (HTTP Archive)" file