HAR stands for HTTP archive. It is a file that contains interactions that happened between a web browser and a website (a web server). These files have the extension .HAR.
What exactly does a HAR file contain and how does it look like?
HAR files are JSON objects. Here’s a sample HAR file.
Here’s a visualization of one of the network requests that happened on the file. This is a specific request payload from a HAR file:
This is a specific response present in the HAR file:
As you can see, each network request that was sent and received is captured in the HAR file, along with
the request payload (headers, query and body),
the response payload (status code, headers, query and body)
cache-control information
any cookies that were sent and received
information on timing
How are HAR files useful?
Basically, HAR files help unpack and replay what happened between the user’s browser session and your web server within a specific time duration - they list all the information we mentioned in the previous section.
HAR files help engineers understand what happened when a user experienced a bug or an unexpected behaviour. Such files can also be used by customer support teams and QA folks to troubleshoot issues.
Can HAR files contain sensitive information?
Yes, HAR files can contain sensitive data like authentication tokens or passwords and other credentials because such details are transported in cookies, API headers, etc. (which are included in these HAR files).
While HAR files can be manually edited, it’s not possible to identify all possible types of personal information that are present in the file easily. There are several tools that can run a scan on HAR files and remove sensitive data, automatically.
Do HAR files contain the same content as the website?
They don’t contain the content of an actual website. They only contain a subset of network requests and certain files that were sent back and forth between the web browser and the web server within a specific duration.
What should customer support teams know about HAR files?
Customer support teams can occasionally request for HAR files to probe the root cause of a bug or a product issue. Because HAR files likely contain sensitive personal information, it's important to inform customers that they need to sanitize the files before they share it.
Is there a way to troubleshoot issues without requesting this HAR file from customers?
HAR files, as stated, contain details about network requests. You can use an addon like Beam for Google Chrome to capture such details, along with a screen recording of what went on in your app when a bug occurred.
Beam also offers collection links that you can share with your customers. Once they receive a collection link, they can tap the ‘Record’ button to start recording the issue they’re facing through the browser.
How do I create or download HAR files in Chrome?
To download HAR files, first open Chrome’s Dev Console.
If you’re on Windows, you can hit Ctrl + Shift + J and if you’re on Mac, you can hit Cmd + Option + J. Alternatively, you can right click on any webpage and choose Inspect
Then, open the Network tab
Then, click Preserve log. This is a safe practice, because this ensures that logs aren’t cleared if you navigate between pages.
Once this is all done, ensure to perform the actions that led to unexpected issues so that the scenario is reproduced entirely.
Once you’ve performed all necessary actions to see an expected behavior or unexpected issue, click on the download icon that looks like the one shown below in the screenshot.
How do I view HAR files in Google Chrome?
You can directly open HAR files by dropping them into the Developer Console.
To view HAR files, first open Chrome’s Dev Console.
If you’re on Windows, you can hit Ctrl + Shift + J and if you’re on Mac, you can hit Cmd + Option + J.
Then, open the Network tab
Then click the icon that looks like the one in the screenshot below to choose any HAR file from your computer.
Once this is done, you’ll be able to instantly see a list of requests from the HAR file and view all its details.
How do I create or download HAR files in Firefox?
On Firefox,
Right click on any tab and click Inspect
Choose the Network tab
Look for the Settings (gear) icon as shown in the screenshot below
Click and choose Save all as HAR
How do I create or download HAR files in Safari?
Once you open Safari,
Click Safari in the menubar on the top left area and choose Settings
Go to Advanced and check Show features for web developers
Now, you’ll see a new menu item in the menubar on top-left: Develop
Click that, and choose Show web inspector. Alternatively, you can press Option + Command + I
Go to the Network tab in the inspector that opens
Click the Filter icon that looks like the one below and choose Preserve Log. This ensures that logs aren’t lost as you navigate across pages or when you refresh the page.
Now, perform the actions that led to an unexpected behaviour or a bug. You’ll see the list populate with data. Now, on the right, you’ll see an Export button.
This should give you the HAR file you’re looking for, in Safari.
How do I create or download HAR files in Microsoft Edge?
The way you download HAR files from Microsoft Edge is very similar to Chrome - except that it might be harder for you to find the Network tab. We’ll reiterate the instructions here just so that it’s clear.
If you’re on Windows, you can hit Ctrl + Shift + J and if you’re on Mac, you can hit Cmd + Option + J.
This opens the Microsoft Edge’s Dev console. On this console, either find a tab named Network or find an icon that looks like the Wifi icon, similar to this:
From here, check Preserve logs for the same reasons mentioned above.
From here, click the Download icon to download the HAR file to your computer and share it with team members for troubleshooting.
Alternative to sharing HAR files
A lot of times, just network logs may not be enough. You might want to take screenshots of the console log tab and send over that as well.
Alternatively, you can install Beam through the Chrome extension and just record a screen capture. Beam automatically captures network requests, console logs and other technical details easily. Through the link that Beam gives you, developers can watch your screen recording and access a preserved version of these logs to troubleshoot the bug.
