Capturing a Chrome dev console trace in a .har file

Description of Issue

Please send me F12 trace logs of the issue being reproduced.

Context
  • Internet Browser

  • Google Chrome

  • Microsoft Edge

  • F12 Trace

  • Developer Console

  • Logging Tools

Cause

Procedure for capturing browser developer console contents in a file.

Resolution

Google Chrome:

  1. Open Google Chrome and browse to the page where the issue is occurring.

  2. From the Chrome menu bar select More Tools > Developer Tools

  3. From the panel opened, select the Network tab.

  4. Look for a round Record button in the upper left corner of the tab, and make sure it is red. If it is grey, click it once to start recording.

  5. Check the box Preserve log.

  6. Click the Clear button to clear out any existing logs from the Network tab.

  7. Reproduce the issue while the network requests are being recorded.

  8. Once you have reproduced the issue, right-click anywhere in the grid of network requests, select Save as HAR with Content, and save the file.

Microsoft Edge:

  1. Open Edge and browse to the page where the issue is occurring.

  2. From the Edge menu bar select Settings and More denoted by the ellipsis icon.

  3. Select More Tools then select Developer tools to expand the sidebar.

  4. From the side bar opened, select the Network tab denoted by the Wi-Fi symbol.

  5. Look for a round Record button in the upper left corner of the tab, and make sure it is red. If it is grey, click it once to start recording.

  6. Check the box Preserve log.

  7. Click the Clear button to clear out any existing logs from the Network tab.

  8. Reproduce the issue while the network requests are being recorded.

  9. Once you have reproduced the issue, right-click anywhere in the grid of network requests, select Save as HAR with Content, and save the file.

Â