FAQ: CREATING HAR FILES





WHAT IS A HAR FILE?

HAR is short for HTTP ARchive, which shows a record of all the requests a browser makes with a website.

HAR files are used to troubleshoot any issues users can be having with a website to diagnose performance issues such as:

  • Slow load times
  • Incorrect file formats
  • Missing assets
  • Timeouts with running tasks

How do you Generate a HAR File?

There are different ways of generating a HAR file depending on which browser you are using. Below you will find the methods for the following browsers: Google Chrome, Firefox, Safari, Microsoft Edge and Internet Explorer 11

GENERATING A HAR FILE IN GOOGLE CHROME

Step 1:

Navigate to the page with the problem

Step 2:

Once you are on the page, use the keyboard shortcut Command+Option+J for Mac to enter Chrome Dev Tools or hit F12 or Control+Shift+I in Linux or Windows.

If successful, your browser window should display the following screen (DevTools):

Chrome (v77.0.3865.120 Build 64-bit) DevTools Console Tab

Chrome (v77.0.3865.120 Build 64-bit) DevTools Console Tab


Step 3:

You should see Console selected on the top left of the new screen.


Step 4:

Click on the network tab and your screen should change to something like below:

DevTools Network Tab

DevTools Network Tab


Step 5:

On the network screen, make sure to check the boxes Preserve Log and Disable Cache on the top left. The example above already has both Preserve Log and Disable Cache selected.


Step 6:

Refresh the page to record the network traffic between your browser and the website.


Step 7:

Once the website has completed loading, right click on any of the items listed on the table. A list of options like below should appear:

Right click options (network tab)

Right click options (network tab)


Step 8:

Select the option Save all as HAR with content. A dialog box should appear to give you an option to save the file to your computer.

Select: "Save all as HAR with content"

Select: "Save all as HAR with content"


Step 9:

You're done! You can now review the file before sending it to us for troubleshooting.


GENERATING A HAR FILE IN FIREFOX

Step 1:

Navigate to the page with the problem

Step 2:

Once you are on the page, use the keyboard shortcut Command+Option+I to open the Web Developer Console.

If successful, your browser window should display the following screen:

Firefox (v69.0 64-bit) Web Developer Screen

Firefox (v69.0 64-bit) Web Developer Screen


Step 3:

You should see Console selected on the top left of the new screen.


Step 4:

Click on the network tab and your screen should change to something like below:

Firefox Web Developer Network Tab

Firefox Web Developer Network Tab


Step 5:

On the network screen, make sure to check the boxes Persist Log and Disable Cache on the top left.

The example above already has both Persist Log and Disable Cache selected.


Step 6:

Refresh the page to record the network traffic between your browser and the website.

The screen should now look like below:

Firefox Web Developer Network Tab1

Firefox Web Developer Network Tab


Step 7:

Once the website has completed loading, right click on any of the items listed on the table. A list of options like below should appear:

Options screen

Options screen


Step 8:

Select the option Save all as HAR. A dialog box should appear to give you an option to save the file to your computer.

Select: "Save all as HAR"

Select: "Save all as HAR"


Step 9:

You're done! You can now review the file before sending it to us for review.


GENERATING A HAR FILE IN SAFARI

Step 1:

Navigate to the page with the problem

Step 2:

Once you are on the page, use the keyboard shortcut Command+Option+I to open the Safari Web Inspector..

If successful, your browser window should display the following screen (Web Inspector):

Safari Web Inspector (Version 12.0.3) Console Tab

Safari Web Inspector (Version 12.0.3) Console Tab


Step 3:

By default Console is the first screen that is displayed, but it also will open the last window you have used last.


Step 4:

If not already in the Network tab, Click on the Network tab on the top left of the Web Inspector Window and your screen should change to the one like below:

Safari Web Inspector Network Tab

Safari Web Inspector Network Tab


Step 5:

On the network screen, make sure to check the boxes Preserve Log and Disable Cache on the top left. The example above already has both Preserve Log and Disable Cache selected.


Step 6:

Refresh the page to record the network traffic between your browser and the website.

Step 7:

Once the website has completed loading, right click on any of the items listed on the table. A list of options like below should appear:

Right click options (network tab)

Right click options (network tab)


Step 8:

Select the option Export HAR. A dialog box should appear to give you an option to save the file to your computer.

Select: "Save all as HAR with content"

Select: "Save all as HAR with content"


Step 9:

You're done! You can now review the file before sending it to us for troubleshooting.


GENERATING A HAR FILE IN MICROSOFT EDGE

Step 1:

Navigate to the page with the problem

Step 2:

Once you are on the page, push the F12 key to open the Developer Tools Screen.

If successful, your browser window should display the following screen (Web Inspector):

Microsoft Edge Developer Tools (v44.17) Elements Tab

Microsoft Edge Developer Tools (v44.17) Elements Tab


By default the Elements screen is the first displayed.


Step 3:

If not already in the Network tab, Click on the Network tab on the top left of the Web Inspector Window and your screen should change to the one like below:

Microsoft Edge Developer Tools Network Tab

Microsoft Edge Developer Tools Network Tab


Step 4:

On the network screen, refresh the page so that the browser records network activity from initial load.


Step 5:

Once the website has completed loading, click on the Floppy Icon (Shown Below) to save the HAR file.

Click on the floppy icon to save the network activity (HAR)

Click on the floppy icon to save the network activity (HAR)


Step 6:

You're done! You can now review the file before sending it to us for troubleshooting.


GENERATING A HAR FILE ON INTERNET EXPLORER 11

Step 1:

Navigate to the page with the problem

Step 2:

Once you are on the page, push the F12 key to open the Developer Tools Screen.

If successful, your browser window should display the following screen (Web Inspector):

Internet Explorer Developer Tools (v11.8) Elements Tab

Internet Explorer Developer Tools (v11.8) Elements Tab


By default the Console screen is the first displayed.


Step 3:

If not already in the Console, Click on the Network tab on the top left of the Web Inspector Window and your screen should change to the one like below:

Microsoft Edge Developer Tools Network Tab

Microsoft Edge Developer Tools Network Tab


Step 4:

On the network screen, refresh the page so that the browser records network activity from initial load.


Step 5:

Once the website has completed loading, click on the Floppy Icon (Shown Below) to save the HAR file.

Click on the floppy icon to save the network activity (HAR)

Click on the floppy icon to save the network activity (HAR)


Step 6:

You're done! You can now review the file before sending it to us for troubleshooting.