HAR file is used to store information about HTTP requests and is an important data source for developers when troubleshooting issues and errors, as well as when analyzing the performance of web applications or websites.
In this article, we will describe the structure of a HAR file, provide detailed instructions on how to generate a HAR file and explain how to open and analyze a HAR file.
HAR file structure
HAR (HTTP Archive) is a JSON-formatted archive file with a .har extension.
The root element of a HAR file is a Log object, which may include the following items:
| Name | Type | Description |
|---|---|---|
| version | version | Version number of the format. |
| creator | object | required | Name and version information of the log creator application. |
| browser | object | optional | Name and version information of the user agent. |
| pages | array | optional | List of all exported (tracked) pages. |
| entries | array | required | List of all exported (tracked) HTTP requests. |
| comment | string | optional | A comment provided by the user or the application. |
Detailed information on the HAR file structure and specification can be found in this document: https://w3c.github.io/web-performance/specs/HAR/Overview.html.
The HAR format specification was created by the W3C’s Web Performance Working Group, but it was never officially published. Hovever, it is utilized by all modern browsers.
How to Export a HAR File From Any Browser
Exporting HAR files is supported by any modern browser. Below, you will find instructions on how to obtain a .har file in different browsers.
How to get a HAR file in Chrome
To export a HAR file in the Chrome browser, follow these steps:
- Open the browser DevTools. You can find instructions for opening DevTools in Chrome in this article – https://webvizio.com/blog/how-to-utilize-browser-logs-for-effective-qa-bug-reporting/
- Go to the Network tab.
- Click on the Export HAR icon.
These instructions for Google Chrome also work for other Chromium-based browsers such as Microsoft Edge, Opera, Arc, Brave, and Vivaldi.
The complete list of the most popular Chromium-based browsers you can find here.
How to get a HAR file in Firefox
- Open the browser DevTools. You can find instructions for opening DevTools in Firefox in this article – https://webvizio.com/blog/how-to-utilize-browser-logs-for-effective-qa-bug-reporting/
- Go to the Network tab.
- Click on the network settings icon in the top-right corner.
- Select “Save All As HAR”
How to get a HAR file in Safari
- Open the browser DevTools. You can find instructions for opening DevTools in Safari in this article – https://webvizio.com/blog/how-to-utilize-browser-logs-for-effective-qa-bug-reporting/
- Go to the Network tab.
- Click on the Export link.
🧭
- Most browsers do not collect network logs until DevTools is opened. If you open DevTools and immediately export the HAR file, it will likely be empty or unavailable. To resolve this issue, simply reload the page with the DevTools panel open, and you will see that all HTTP request entries appear in the Network panel and will be available in the HAR file.
- The open DevTools window will be associated with a browser tab opened at its launch, even if DevTools opened in a separate window. Therefore, the data that goes into the HAR file pertains only to that tab. To export data from a different tab, you will need to open the Developer Tools for that tab.
How to open a HAR file
You can find many HAR file viewers or HAR file analyzers online, but the best HAR file viewer is still in your browser. DevTools of all modern browsers support not only exporting HAR files but also importing HAR file data with the ability to view the HAR file in the Network tab. It allows you to use the same interface for previewing HAR files that you use to analyze network requests in real time via the Network tab. For this reason, your browser is the best HAR file viewer and the best option to analyze a HAR file.
Open a HAR file in Chrome
- Open the browser DevTools on any browser tab.
- Go to the Network tab.
- Click on the Import HAR icon.
- All set. Instead of the current page requests, the Network tab will display requests from the imported HAR file.
Instructions for Google Chrome also work for other Chromium-based browsers such as Microsoft Edge, Opera, Arc, Brave, and Vivaldi.
Open a HAR file in Firefox
- Open the browser DevTools on any browser tab.
- Go to the Network tab.
- Click on the network settings icon in the top-right corner.
- Select “Import HAR Files”.
- The Network tab will display requests from the imported HAR file.
Open a HAR file in Safari
- Open the browser DevTools on any tab.
- Go to the Network tab.
- Click on the Import link.
- The network tab will display requests from the imported HAR file.
In some cases, browsers may not open HAR files created in other browsers or their older versions. In this case, you can import the file into any other browser or open it in the original browser’s later version.
If you still want to use a third-party resource to work with HAR files, we recommend using Google HAR Analyzer.
How to analyze a HAR file
You don’t need to use any specific software or dev utilities to analyze a HAR file. Simply open the HAR file in the browser as described above, as your browser is the best HAR analyzer. Analyzing a HAR file will help in solving the issues described below.
Troubleshooting using a HAR file
A HAR file contains response codes for requests, the content of the request, and the server response. This information will help find requests that ended with errors (requests with errors have status codes from 400 – 499 and 500 – 599).
To find requests with errors, sort the requests list by the status field from highest to lowest; all requests that end with errors will appear at the top.
Once you find a request with an error, you can open it by clicking on the request line. Then, you’ll see a window with detailed information about the request. The tabs in this window may differ in different browsers, but in any browser, you will find the following helpful information for troubleshooting:
- All request and server response headers (Headers tab).
- The data that was sent to the server in the request (Request or Payload tab).
- The response that came from the server (Response tab).
The above data will help you determine the cause of the request error.
If there are no errors in the requests, you can use the above information for debugging. A HAR file contains all requests and server responses, which is enough to restore in detail the state in which the application or website was when exporting the HAR file.
Performance optimization using a HAR file
HAR files are commonly utilized to improve the performance of web applications and websites.
For each request, a HAR file records the following data:
- Request time
- Response time
- Memory size of the response
- Is the request cached
Using this data, you can determine which requests took too long and possibly block the execution of other faster requests, which of them can be cached or optimized for execution on the server.
Most modern browsers automatically build a timeline of requests based on data from the HAR file, which significantly simplifies the process of analyzing the HAR file.
How to export and analyze a HAR file with the Webvizio extension
Webvizio browser extension reduces time spent on QA testing and bug reporting for live websites and web applications. With the Webvizio extension, you don’t need to export a .har file manually, as Webvizio automatically collects all network request data. It provides data similar to DevTools for viewing and analyzing HTTP requests through the Webvizio interface.
To get Network logs in Webvizio, click the Enable logs collection icon in the task creation window:
If this function is enabled, all logs will become available on the Network tab on the Webvizio task page.
If you need more than the automatically collected data, you can download the HAR File in Webvizio. All you need to do is keep the DevTools panel open while adding a task using the Webvizio browser extension. If log collection is enabled through Webvizio’s task interface, the HAR file will be automatically exported and attached to the task.
To download this HAR file, open the Network tab and click the Download HAR link. After that, you can import this file into any browser’s DevTool or third-party HAR file viewer.
To wrap up, HAR files play a key role in helping QA teams and web developers find and fix issues or bugs. Understanding how these files are set up and how to export and import them in different browsers helps users spot browser errors and enhance overall site or web app performance. Modern browsers have built-in solutions to read and analyze HAR files. You can analyze HAR files in your browser or use third-party tools.
