What is a HAR File?

Occasionally TSE’s need to troubleshoot issues that they aren’t able to reproduce on their end. Sometimes, depending on the issue, to help their investigation they need to acquire additional information about the network requests that are being triggered in a customer’s browser while the issue is happening and to help with the TSE’s investigation, they may request a HAR file. What exactly is a HAR file?

HAR, HTTP Archive, is stored JSON formatted tracking information between a browser and a website. A HAR file is mostly used for identifying performance issues such as; sound notifications not working, latency issues, page rendering problems…etc. The HAR file keeps track of each resource loaded by the browser along with each resource's timestamp. It’s also important to note that sensitive data can be viewed in HAR files based on the requests being made (passwords, personal info, credit card information…etc).

Generating a HAR File 

Below are basic instructions on downloading HAR files in different browsers. These instructions are the same for both Mac and Windows users. 

Chrome:

1. In the Chrome browser, go to the page where the issue is occurring.

2. Look for the vertical ellipsis button in the top right of the browser and select More Tools > Developer Tools. Or use the shortcuts Ctrl-Shift-J (Windows) / Ctrl-Opt-J (Mac).

3. In the Dev Tools panel, 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 gray, click it once to start recording.

5. Check the Preserve log box.

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. After reproducing the issue, in the Chrome dev tools, click Export HAR to download. Then save the file to your computer: Save as HAR. 

Edge:

1. In the Edge browser, go to the page where the issue is occurring.

2. Look for the horizontal ellipsis button in the top right of the browser and select More Tools > Developer Tools. Or use the shortcuts F12 (Windows) / Opt-Cmd-i (Mac).

3. In the Dev Tools panel, 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 gray, click it once to start recording.

5. Check the Preserve log box.

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. After reproducing the issue, in the Edge dev tools, click Export HAR to download. Then save the file to your computer: Save as HAR.

Firefox:

1. In the Firefox browser, go to the page where the issue is occurring.

2. Look for the Vertical bars button in the top right of the browser and select More Tools > Web Developer Tools. Or use the shortcuts F12 (Windows) / Opt-Cmd-i (Mac).

3. In the Dev Tools panel, select the Network tab.

4. Look for a round Record button at the end of the ‘Filter URLs’ section. If the ‘Pause’ icon is showing, that means it is already recording.

5. Click the Settings icon on the far right and select 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. After reproducing the issue, in the Firefox dev tools, click the Settings icon then Save All as HAR to download. Then save the file to your computer: Save as HAR.

Sound Notification Issue Example

A client claims that they are unable to hear sound notifications and they have all of their notifications set correctly in their Settings. Below are instructions on what they would need to send in a HAR file (Chrome).

1. In the Chrome browser, go to the page where the issue is occurring.

2. Look for the vertical ellipsis button in the top right of the browser and select More Tools > Developer Tools. Or use the shortcuts Ctrl-Shift-J (Windows) / Ctrl-Opt-J (Mac).

3. In the Dev Tools panel, 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 gray, click it once to start recording.

5. Check the Preserve log box.

6. Click the Media tab.

7. Click the Clear button to clear out any existing logs from the Network tab.

8. Reproduce an event that would trigger a sound notification (ex. Getting assigned a conversation).

9. After reproducing the issue, in the Chrome dev tools, click Export HAR to download. Then save the file to your computer: Save as HAR.