Create a HAR File

In this article, you will 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.

Table of contents

  1. What is a HAR file? 
  2. How can you create a HAR file? 
    1. Microsoft Edge
    2. Mozilla Firefox
    3. Google Chrome
    4. Safari

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. You can begin recording the HAR file by clicking on the red circle 
    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

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 has 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. You can begin recording the HAR file by clicking on the red circle 
    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