How to create a .HAR file using different web browsers [Cognite Official]

As Support team we can sometimes ask you to share a .HAR file when you report an issue in a web application.

HAR is the short form for HTTP ARchive format, which tracks all the logging of web browser's interaction with a site.

It will save time if you already attach this file when you reach out to us initially. 

If you are experiencing any of the below issues, a .HAR file will be useful:

• Performance issues: slow page loading, timeouts when performing certain task

• Page rendering issues: incorrect page format, missing information

• Issues in the UI
   

 If you want to know how to generate a file like that, keep on reading!

Generating a .HAR file for Google Chrome

1. Open Google Chrome and go to the page where the issue is occurring.

2. Look for the vertical ellipsis button and select More Tools > Developer Tools.

3. From the panel opened, select the Network tab.

4. Look for a round record button ( 🔴 ) in the upper left corner of the tab, and make sure it is red. If it is grey, click it once to start recording.

5. Check the box Preserve log.

6. Click the Clear button ( 🚫 ) to clear out any existing logs from the Network tab.

7. Reproduce the issue that you were experiencing before, while the network requests are being recorded.

8. Once you have reproduced the issue, in Chrome, click Export .HAR to download. Then save the file to your computer: Save as .HAR with Content.
    

9. Upload your .HAR file to your ticket or attach it to your email so that our Support team can analyze it.
    

Generating a .HAR file in Internet Explorer/Microsoft Edge 

1. Open Internet Explorer and go to the page where the issue is occurring.

2. Press F12 on your keyboard (or click the gear icon  >  F12 Developer Tools).

3. Click the Network tab.

4. Reproduce the issue that you were experiencing before, while the network requests are being recorded.

5. Once done, click the Save button.

6. Give the trace a filename and click the Save button which will save it as a .har file or .xml file.

7. Upload your HAR file to your ticket or attach it to your email so that we can analyze it.

The instructions are the same for a MAC computer or a Windows computer.

Generating a .HAR file in Firefox

1. Open Firefox and go to the page where you are experiencing trouble.

2. Select the Firefox menu (three horizontal parallel lines) at the top-right of your browser window, then select Web Developer  >  Network.

3. The Developer Network Tools opens as a docked panel at the side or bottom of Firefox. Click the Network tab.

4. The recording autostarts when you start performing actions in the browser.

5. Once you have reproduced the issue and you see that all of the actions have been generated in the Developer Network Panel (should just take a few seconds), right-click anywhere under the File column, and click on Save all as Har.

6. Save the .HAR file somewhere convenient.

7. Upload your .HAR file to your ticket or attach it to your email so that we can analyze it.

The instructions are the same for a Mac computer or a Windows computer.

Generating a .HAR file in Safari

Before generating the HAR file, make sure you can see the Develop menu in Safari. If it is not there, follow the instructions.
If you don’t see the Develop menu in the menu bar, choose Safari  >  Preferences, click Advanced, then select “Show Develop menu in menu bar”.

1. Open the Develop menu and select Show Web Inspector.

2. Click the Network tab and complete the activity that is causing issues.

3. Click the Export icon on the far right of the network tab and save the HAR file.

4. Send us the file via your support ticket.

Note: User sessions are managed via your IDP. Access token lifetime can vary from 60 to 90 minutes. Unless you are sharing the .HAR more than 90 minutes after generating it, you can choose to remove the access token from the .HAR file. After removing sensitive information, make sure to double-check whether the modified file is in the correct format. 

HAR file generation for Android Devices 

To forward traffic from your Android app to your Windows machine running Fiddler, you need to set up your Android device to use your Windows machine as a proxy. Here's how to do it:

1. Install Fiddler on Your Windows Machine:
   Download and install Fiddler from the official website.
   Once installed, open Fiddler and go to Tools > Options.
2. Configure Fiddler to Accept Remote Connections:
   In the Fiddler Options window, go to the Connections tab.
   Check the box for Allow remote computers to connect.
   Ensure the Fiddler listens on port is set to 8888 (default).
   Click OK to apply the changes.
3. Find Your Windows Machine's IP Address:
   Open Command Prompt on your Windows machine.
   Type ipconfig and press Enter.
   Look for the IPv4 address under the active network connection. This is your Windows machine's IP address.
4. Configure Proxy Settings on Your Android Device:
   Go to Settings on your Android device.
   Navigate to Wi-Fi and connect to the same Wi-Fi network as your Windows machine.
   Tap and hold on your connected Wi-Fi network and select Modify network or Advanced settings.
   Scroll down and find the Proxy option.
   Change the proxy setting to Manual.
   In the Proxy hostname field, enter the IP address of your Windows machine.
   In the Proxy port field, enter 8888.
   Save the settings.
5. Install the Fiddler Root Certificate on Your Android Device:
   Open a web browser on your Android device and go to http://ipv4.fiddler:8888/.
   Download and install the Fiddler root certificate to allow HTTPS traffic to be captured.
   Follow the instructions to install the certificate on your Android device.
6. Capture Traffic:
   Open Fiddler on your Windows machine and start capturing traffic.
   Any network requests made by your Android app should now appear in Fiddler.
7. Testing and Troubleshooting:
   If you don’t see any traffic, ensure that your Android device and Windows machine are on the same network and that the proxy settings are correctly configured.
   Make sure that your firewall is not blocking the connection.
   By following these steps, you should be able to capture and analyze the traffic from your Android app using Fiddler on your Windows machine.

To save network calls as a .HAR file in Fiddler:

1. Open Fiddler and start capturing network traffic.
2. Once the network calls are captured, go to the File menu.
3. Select Export Sessions > HTTP Archive (HAR).
4. Choose the location and save the .HAR file.

IMPORTANT NOTE:

When Fiddler is running, many applications might experience issues due to SSL/TLS interception unless Fiddler's root certificate is trusted. Here are the steps to install the Fiddler root certificate both on your machine and in your browser's trusted certificate store:

1. Install Fiddler Root Certificate on Your Machine

Steps for Windows:

1. Run Fiddler as Administrator:
   • Open Fiddler and ensure it's running with administrator privileges.
2. Enable HTTPS Decryption:
   • Go to Tools > Options > HTTPS tab.
   • Check Decrypt HTTPS traffic.
   • Click Yes to trust the Fiddler root certificate when prompted.
3. Install the Certificate on Windows:
   • After enabling HTTPS decryption, Fiddler will prompt you to install its root certificate.
   • Select Yes when prompted to install the certificate to the Windows Trusted Root Certificate Authorities store.
4. Verify Installation (Optional):
   • Open Control Panel > Internet Options > Content tab.
   • Click on Certificates > Trusted Root Certification Authorities.
   • Verify that the DO_NOT_TRUST_FiddlerRoot certificate is installed.

2. Install Fiddler Root Certificate in Browser's Trusted Store

For Chrome and Edge (Windows):

• Chrome and Edge use the Windows Trusted Root store, so if you followed the steps above, the certificate will automatically be trusted in these browsers.

For Firefox:

Firefox uses its own certificate store, so you’ll need to manually install the certificate in Firefox.

1. Open Fiddler and Export the Certificate:
   • In Fiddler, go to Tools > Options > HTTPS tab.
   • Click on Actions > Export Root Certificate to Desktop.
2. Install in Firefox:
   • Open Firefox, and type about:preferences in the address bar.
   • Scroll down and click Privacy & Security on the left panel.
   • Under the Certificates section, click View Certificates.
   • Go to the Authorities tab, and click Import.
   • Select the Fiddler certificate exported to the desktop.
   • When prompted, check Trust this CA to identify websites and click OK.

For Other Browsers:

Most browsers use the system's trusted certificate store, so the certificate should work after being installed on the OS level. However, for some applications or browsers that have separate certificate stores, you may need to import it manually like in Firefox.

Final Step:

After installing the certificate, restart the browser or application to ensure it starts trusting Fiddler’s root certificate for HTTPS decryption.