What is HAR File?

HAR file or HTTP Archive file contains the details about network requests from client to server inside the browser, it is in JSON format however the extension of this file is .har

The HAR file is mostly used to understand the request and response performance issues, slow API calls, page rendering, or load times, overall it contains all the details related to resources being processed between the browser to the server.

HAR file details

HAR file format is JSON structure and to visualize its content we can use tools like HAR Viewer or network viewer

To analyze the performance of the site, we can export the HAR files, steps are as below:

1.First, we need to open a network tab in Chrome DevTools:

a] Open Google Chrome Browser

b] At the Top Right Corner Click on Three Dots > More Tools > Developer Tools > Network Tab

2.After opening the network tab, we can see the small icon (⬇️) which we can use to Export HAR... file.

3.Note: To get the site loading content, we have to make sure our site network log recording is enabled and after that, we have to refresh/reload the site we need to perform analyses of network requests, Please see the image and small red circle icon (🔴) indicates that network logs recording is on.

4.That’s all, now we can export our HAR file to analyze it.

Note: To understands chrome’s network tab in detail you can refer to this link.

Structure of the HAR file

We are going to take the network request example from Zipy.ai | Debugging made lightning fast

In the below-attached image from Zipy, we can see network request timings on the popup, I’m using Google Chrome’s network tab screenshot.

In the above example image, we can see details about network request resources like name, status, type, size, and time along with the waterfall.

Network waterfall contains the details about request timings in graphical charts representation format.

The network tab can log the details about each network request, but to analyze it properly and preserve or take a backup of the current network request log, we can export this network request in the HAR file to analyze or to keep a backup.

Note: Before sending the HAR file to anyone, you have to verify its content as it can contain privacy & security sensitive information which you don’t want to share with everyone.

Below are the sample JSON from the HAR file:

The above image is only a small part of the HAR file, the root structure is as below:

{
    "log": {
        "version" : "1.2",
        "creator" : {},
        "browser" : {},
        "pages": [],
        "entries": [],
        "comment": ""
    }
}

Let’s see the details

• version [string] - A version is a number in string format. If empty, string "1.1" is assumed by default.
• creator [object] - A name and version info of the log creator application (it depends on the browser).
• browser [object, optional] - Name and version info of used browser, the structure of browser object is same as a creator object.
• pages [array, optional] - All the logged pages by DevTools.
• entries [array] - This will hold all logged requests by DevTools.
• comment [string, optional] (new in 1.2) - A comment provided by the user or the application.

Let’s see the entries structure:

"entries": [
    {
        "pageref": string, // page count (ex: page_0)
        "startedDateTime": string, // Date in ISO String (ex: 2022-08-29T07:18:07.133Z)
        "time": number,
        "request": object, // Request Details
        "response": object, // Response Details
        "cache": object, // Cache Usage Details
        "timings": object, // Timing details of the request (IMP)
        "serverIPAddress": string, // server IP address which was connected.
        "connection": string, // unique id of connection
        "comment": string // comment given by user or application
    }
]

• pageref [string, unique, optional] - Parent Page Reference. Leave if the web application does not support grouping by page. (example: Single Page Application).
• startedDateTime [string] - ISO Date Time String when request is started (ISO 8601 - YYYY-MM-DDThh:mm:ss.sTZD).
• time [number] - Total request time in milliseconds,  This is an aggregation of all timings available in the timings objects excluding -1 values.
• request [object] - Detailed info about the request.
• response [object] - Detailed info about the response.
• cache [object] - Info about cache usage.
• timings [object] - Contains details about timings of request/response round trip.
• serverIPAddress [string, optional] (new in 1.2) - Connected IP address of the server after resolving the DNS.
• connection [string, optional] (new in 1.2) - Unique ID of the TCP/IP connection, we can use the port of the client or server however if the port number is not unique we can use any unique ID
• comment [string, optional] (new in 1.2) - A comment given by the user or the application.

NOTE: To understand the format in detail you can refer to this link.

Summary

We have seen the overall details about the HAR file, basically, the HAR file can be used to share the site network logs to analyze it further, it contains the site load, and execution timings of the different resources like JS, CSS, XHR, etc. The details about the network log are in JSON so it’s pretty easy to understand it.

TBD: In Zipy, we are using HAR file specification to show the network requests captured using zipy sdk