Create a HAR File

In this article, you can learn how to create a HAR file.

When you experience issues related to performance (long lead time, loading issues, etc.), our team may ask you to provide a HAR file. The file shows where the website issues are and how they can be combated and overcome.

What is a HAR file?

The HAR file contains information such as timing components generated by your browser. Some details and data displayed in a HAR file are the following:

• Stalled/Blocking
• Proxy Negotiation
• DNS Lookup
• Initial Connection / Connecting
• SSL
• Request Sent / Sending
• Waiting (TTFB)
• Content Download / Downloading

The file has JSON format which needs a HAR reader app to be viewed. The file can also be viewed through Chrome’s Developer Tool in waterfall view, which enables you to see further details by hovering your mouse on the line. 

How can you create a HAR file?

This depends on the type of browser you are using. This article will provide you with a breakdown of the most common browser types.

Microsoft Edge

1. To open the developer console when you are viewing the webpage you are having issues with, you can right-click and select 'Inspect'
   1. Alternatively, you can hit the keys:
      1. Windows and Linux: Control + Shift + C
      2. Mac: Command + Option + C
2. Click on the arrows pointing to the right and select 'Network'
3. Make sure that the box 'Preserve log' is ticked 
4. The recording of the HAR file is started automatically. By clicking on the red circle, you end the HAR file recording
   1. Reload the webpage you are having issues with 
   2. Wait until the processing of the creation of the HAR file is finished loading
      
      1. You will need to monitor both the finishing of the webpage that is loading and the processing of the HAR file being made
5. Right-click anywhere within the waterfall 
6. Select 'Save all as HAR with content'
7. Save the file onto your computer

Mozilla Firefox

1. To open the developer console, click on the 3 horizontal lines on the top right corner
2. Select Web Developer
3. Select Web Developer Tools
   1. Alternatively, you can right-click on the webpage you are experiencing issues and click on Inspect
   2. Another alternative is to hit the keys:
      1. Windows and Linux: Control + Shift + J
      2. Mac: Command + Shift + J
4. Select 'Network' from the menu 
   1. The recording begins automatically when you refresh the webpage or reproduce the issue you are facing
5. Once it is done, hover over anywhere within the Files section
   1. Make sure that both the webpage and the processing of the HAR file have completely finished loading. This entails looking for any ongoing activity 
6. Right-click and select Save All As HAR
7. Save the file onto your computer

Chrome

1. To open the developer console when you are viewing the webpage you are having issues with, you can right-click and select Inspect
   1. Alternatively, you can hit the keys:
      1. Windows and Linux: Control + Shift + C
      2. Mac: Command + Option + C
2. Click on the arrows pointing to the right and select 'Network'
3. Make sure that the box Preserve log is ticked 
4. The recording of the HAR file is started automatically. By clicking on the red circle, you end the HAR file recording
   
   1. Reload the webpage you are having issues with 
   2. Wait until the processing of the creation of the HAR file is finished loading
      
      1. You will need to monitor both the finishing of the webpage that is loading and the processing of the HAR file being made. In the video below, you will see that although the HAR file processing seems to have finished, the webpage had still not been loaded completely
5. Right-click anywhere within the waterfall 
6. Select Save all as HAR with content
7. Save the file onto your computer

Safari

Right-clicking on the webpage

1. One of the ways to open the developer console when you are viewing a webpage with an ongoing issue is by right-clicking anywhere on the webpage
2. Select Inspect Element

Keyboard shortcut

1. Windows and Linux: Control + Shift + C
2. Mac: Command + Option + C

Alternative options to open your browser’s developer console can be found below.

If the Develop menu is not visible in your browser menu bar

1. When you are viewing the webpage with the issue, click on Safari at the top corner of the browser
2. In the drop-down menu, click on Preferences which will open a pop-up window
3. Click on Advanced
4. Tick the last option called Show Develop menu in menu bar
5. Follow the steps as listed in the next section

If the Develop menu is visible in your browser menu bar

1. Select the Develop menu in the browser menu bar
2. Select Show Web Inspector

Creating a HAR file after opening the developer console

1. Click on Network
2. Make sure the Preserve log is ticked 
3. Refresh the webpage
4. Wait until the processing of the creation of the HAR file is finished loading
   1. You will need to monitor both the finishing of the webpage that is loading and the processing of the HAR file being made. In the video below, you will see that although the HAR file processing seems to have finished, the webpage had still not been loaded completely
5. Select Export on the right-hand side near Preserve log
6. Save the HAR file onto your computer