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:
- Proxy Negotiation
- DNS Lookup
- Initial Connection / Connecting
- 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 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, so here is a breakdown for the most common browser types.
When the webpage you have issues with is open, press F12 on your keyboard, or click on the F12 Developer Tool from the settings menu in the top right corner (from the drop down menu). The developer tool will show up on the bottom of the page where you have to click on the “Network” tab on the horizontal menu. Next to the word network there is a green triangle, by clicking on it, you can start recording (you now have to reload the page or recreate the issue). When it is done you can press the red square to stop the recording.
By clicking on the floppy disk icon, (Export as HAR), you can save it on your desktop
On the top right corner of Firefox next to the browser bar you can click on the triple horizontal line. After this, you will see a drop down Settings menu. When you click on the option called "Web Developer" a list will pop up. By clicking on “Network” in the list this option will appear at the bottom of the page. The recording starts automatically when you refresh the page or reproduce the issue you are facing. Once it is done, keep your mouse under the column, “File”, right click and you will see a list of options.
By clicking on the second option in the list “Save all as HAR” you will be able to save the recording to your desktop.
In chrome you can open the Developer Tools (accessed through the “View” drop down) and select the “Network” tab. This will open developer tools in a separate pop up window. In the developer tools window, you have to make sure the “Recording” button on the top left corner is on (it will be red if it is on) and the tick box “Preserve Logs” is checked. Now, refresh the page that is causing problems. Once the Page has stopped loading, the HAR file can be created by right clicking in the Waterfall and selecting the Save as HAR with content.
You will then be able to save the recording to your desktop.
When the webpage with the issue is open go to the top left corner of the screen and click on the tab “Safari”. In the drop down menu, click on the 3rd option, “Preferences” which will open a pop-up window. On the horizontal list of icons, click on the last one, called “Advanced”. At the bottom of the window tick the last option called “Show develop menu in menu bar”. On the toolbar in the top left corner you will have the tab called “Develop”. From the drop down menu pick “Show Web Inspector “ which will show up at the bottom of the page. Here on the horizontal toolbar click on the “Network” tab. You can record the issue by ticking on the toolbar below “Preserve log”
To save the recording click on Export and in the pop-up window you can name the file and pick the folder where it should be saved.