How to collect HAR logs?

Question

How to collect and save HAR logs for diagnostics purposes?

Answer

Google Chrome

The following steps show how to use the developer tools in Google Chrome. For more information, see Chrome DevTools.

  1. Start recording the steps to reproduce the issue.
    How to capture Reproduction Steps on Windows using Steps Recorder
    How to capture Reproduction Steps on Mac

  2. Navigate to the step just prior to where the issue occurs.

  3. Press F12 to launch the developer tools. You can also launch the tools from the toolbar menu under More tools > Developer tools.

  4. By default, the browser keeps trace information only for the page that's currently loaded. Set the following options so the browser keeps all trace information, even if your repro steps require going to more than one page:

    1. Select the Console tab, select Console settings, then select Preserve Log.

      Screenshot that highlights the Preserve log option on the Console tab in Chrome.

    2. Select the Network tab, then select Preserve log.

      Screenshot that highlights the Preserve log option on the Network tab in Chrome.

  5. On the Network tab, select Stop recording network log and Clear.

    Screenshot of "Stop recording network log" and "Clear" on the Network tab in Chrome.

  6. Select Record network log, then reproduce the issue.

    Screenshot that shows how to record the network log in Chrome.

    You'll see session output similar to the following image.

    Screenshot that shows the session output in Chrome.

  7. After you have reproduced the issue, select Stop recording network log, then select Export HAR and save the file.

    Screenshot that shows how to Export HAR on the Network tab in Chrome.

  8. Stop the Steps Recorder and save the recording.

  9. Back in the browser developer tools pane, select the Console tab. Right-click one of the messages, then select Save as..., and save the console output to a text file.

    Screenshot that shows how to save the console output in Chrome.

  10. Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.

Microsoft Edge

The following steps show how to use the developer tools in Microsoft Edge. For more information, see Microsoft Edge DevTools.

  1. Start recording the steps to reproduce the issue using Steps Recorder.
    How to capture Reproduction Steps on Windows using Steps Recorder

  2. Navigate to the step just prior to where the issue occurs.

  3. Press F12 to launch Microsoft Edge DevTools. You can also launch the tools from the toolbar menu under More tools > Developer tools.

  4. By default, the browser keeps trace information only for the page that's currently loaded. Set the following options so the browser keeps all trace information, even if your reproduction steps require going to more than one page.

    1. Select the Console tab, select Console settings, then select Preserve Log.

      Screenshot that highlights the Preserve log option on the Console tab in Edge.

    2. Select the Network tab. If that tab isn't visible, click the More tools (+) button and select Network. Then, from the Network tab, select Preserve log.

      Screenshot that highlights the Preserve log option on the Network tab in Edge.

  5. On the Network tab, select Stop recording network log and Clear.

    Screenshot showing the Stop recording network log and Clear options on the Network tab in Edge.

  6. Select Record network log, then reproduce the issue.

    Screenshot showing how to record the network log in Edge.

    You'll see session output similar to the following image.

    Screenshot showing session output in Edge.

  7. After you have reproduced the issue, select Stop recording network log, then select Export HAR and save the file.

    Screenshot showing how to Export HAR on the Network tab in Edge.

  8. Stop the Steps Recorder and save the recording.

  9. Back in the browser developer tools pane, select the Console tab. Right-click one of the messages, then select Save as..., and save the console output to a text file.

    Sccreenshot showing how to save the console output in Edge.

  10. Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.

Mozilla Firefox

The following steps show how to use the developer tools in Firefox. For more information, see Firefox Developer Tools.

  1. Start recording the steps to reproduce the issue. 
    How to capture Reproduction Steps on Windows using Steps Recorder
    How to capture Reproduction Steps on Mac

  2. Navigate to the step prior to where the issue occurs.

  3. Press F12 to launch the developer tools. You can also launch the tools from the toolbar menu under More tools > Web developer tools.

  4. By default, the browser keeps trace information only for the page that's currently loaded. Set the following options so the browser keeps all trace information, even if your repro steps require going to more than one page:

    1. Select the Console tab, select the Settings icon, and then select Persist Logs.

      Screenshot of the Console setting for Persist Logs.

    2. Select the Network tab, select the Settings icon, and then select Persist Logs.

      Screenshot of the Network setting for Persist Logs.

  5. On the Network tab, select Clear.

    Screenshot of the "Clear" option on the Network tab.

  6. Reproduce the issue. You'll see session output similar to the following image.

    Screenshot showing example browser trace results.

  7. After you have reproduced the issue, select Save All As HAR.

    Screenshot of the "Save All As HAR" command on the Network tab.

  8. Stop the Steps Recorder on Windows or the screen recording on Mac, and save the recording.

  9. Back in the browser developer tools pane, select the Console tab. Right-click one of the messages, then select Save All Messages to File, and save the console output to a text file.

    Screenshot of the Save All Messages to File command on the Console tab.

  10. Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.

Apple Safari

The following steps show how to use the developer tools in Apple Safari on Mac. For more information, see Safari Developer Tools overview.

  1. Enable the developer tools in Safari:

    1. Select Safari, then select Preferences.

    2. Select the Advanced tab, then select Show Develop menu in menu bar.

      Screenshot of the Safari advanced preferences options.

  2. Start recording the steps to reproduce the issue. 
    How to capture Reproduction Steps on Mac

  3. Navigate to the step prior to where the issue occurs.

  4. Select Develop, then select Show Web Inspector.

    Screenshot of the "Show Web Inspector" command.

  5. By default, the browser keeps trace information only for the page that's currently loaded. Set the following options so the browser keeps all trace information, even if your repro steps require going to more than one page:

    1. Select the Console tab, then select Preserve Log.

      Screenshot that shows the Preserve Log on the Console tab.

    2. Select the Network tab, then select Preserve Log.

      Screenshot that shows the Preserve Log option on the Network tab.

  6. On the Network tab, select Clear Network Items.

    Screenshot of "Clear Network Items" on the Network tab.

  7. Reproduce the issue. You'll see session output similar to the following image.

    Screenshot that shows the output after you've reproduced the issue.

  8. After you have reproduced the issue, select Export and save the file.

    Screenshot of the "Export" command on the Network tab.

  9. Stop the screen recorder, and save the recording.

  10. Back in the browser developer tools pane, select the Console tab, and expand the window. Place your cursor at the start of the console output then drag and select the entire contents of the output. Use Command-C to copy the output and save it to a text file.

    Screenshot that shows where you can view and copy the console output.

  11. Package the browser trace HAR file, console output, and screen recording files in a compressed format such as .zip.

Have more questions? Submit a request

Comments

0 comments

Please sign in to leave a comment.