How to generate a .HAR file for Google Chrome

What is a .HAR file?

HAR stands for HTTP Archive, which is a format for logging connections between your Chrome browser in a website.  These logs will have timestamps along with the connection attempts for being able to see a chronological order of events from the user side.

How does this help troubleshoot?

When looking for more details on why a page is coming back with a specific error, or not redirecting as expected, using a .HAR can help our team identify where the issue may be stemming from.  Most commonly they are used for page rendering issues in which a user may see a 404, or when trying to access a specific portion of our interface resulting in 400 errors.  However, this is only one use of a .HAR file, as they can also be used for slow load times and identifying where bottlenecks may be arising from.

Steps to capture your most recent .HAR file:

  1. Go to a working webpage within the SendGrid UI in your Chrome browser.  You will want to start on a working page to ensure we enable the capturing prior to the issue arising to be able to log it successfully.

  2. Click the 3 - dots next to your profile picture along the top right of the browser window and go to More Tools > Developer tools. (This can also be done on a Mac by command + option + i or by going to View > Developer >Developer Tools along the top bar).

    Screen_Shot_2022-03-23_at_12.54.48_PM.png

  3. Within the Developer Tools window, select the tab labelled Network.

    Screen_Shot_2022-03-24_at_1.09.24_PM.png

  4. You should then see a red circle to your left, as shown in the image above. If grayed out, you will want to click it to enable recording and ensure the preserve log option is checked.  This essentially will enable the recording of the browser connections.

  5. You will then want to click the icon to ensure we clear any logs from prior connections and start fresh.
  6. Now, you should be able to go to the page where you were experiencing the issue (while leaving the tools open) and refresh to generate a log file.

  7. Once you have reproduced the issue, we can now export the .HAR file by clicking the downward facing arrow along the developer tools box as shown below:

    Screen_Shot_2022-03-23_at_2.50.31_PM.png
  8. That's it! You should be ready to pass that to our support team for analysis!
Have more questions? Submit a request