How to Export .HAR file (Chrome / FireFox)

Knowledge Articles
1

Capturing a .HAR file can help diagnose network-related issues such as page load times, errors, and failed requests. Most modern web browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari, offer built-in tools for creating a .HAR file. This article provides step-by-step instructions for capturing a .HAR file in Google Chrome, as well as similar instructions for Firefox and Edge.

How to Capture a .HAR File in Google Chrome:

  1. Open Developer Tools:
  • Right-click on the webpage and select Inspect or press F12 on your keyboard.
  • This will open the Chrome Developer Tools panel.
  1. Go to the Network Tab:
  • In the Developer Tools panel, click on the Network tab.
  • Ensure the recording button (a red circle) is active. If it’s gray, click it to start recording.
  1. Clear Existing Logs (Optional):
  • Click the Clear button (a circle with a line through it) to remove any existing logs. This ensures the .HAR file will only capture the current session’s data.
  1. Reload the Page:
  • Refresh the page you want to analyze. This will record all network requests made by the page.
  1. Stop Recording:
  • Once the page has fully loaded, stop recording by clicking the red button again.
  1. Export the .HAR File:
  • Right-click on any of the recorded network requests in the Network tab.
  • Select Save all as HAR with content or Export HAR.
  • Choose a location on your computer to save the .HAR file.
  1. Share or Analyze the .HAR File:
  • You can now share the .HAR file for troubleshooting or analyze it using tools that support .HAR files.

How to Capture a .HAR File in Mozilla Firefox:

  1. Open Developer Tools:
  • Right-click on the webpage and select Inspect Element or press F12.
  • Click on the Network tab.
  1. Start Recording:
  • Ensure the recording button (a red dot) is active.
  • Refresh the page to capture the network activity.
  1. Export the .HAR File:
  • Once the page has loaded, click the settings gear icon in the Network tab.
  • Select Save All As HAR.

How to Capture a .HAR File in Microsoft Edge:

  1. Open Developer Tools:
  • Right-click on the webpage and select Inspect or press F12.
  • Go to the Network tab.
  1. Start Recording:
  • Ensure the recording button (a red dot) is active.
  • Refresh the page to capture the network activity.
  1. Export the .HAR File:
  • Once the data is captured, right-click on any network request.
  • Choose Save as HAR with content.

Capturing WebSocket Details in Google Chrome:

To capture WebSocket details in a .HAR file in Chrome, follow these steps:

  1. Open Chrome and navigate to the page where the issue is occurring.
  2. Select the ⋮ button and go to More Tools > Developer Tools.
  3. Select the Network tab and click on the WS (WebSocket) tab.
  4. Check the Preserve log checkbox.
  5. Reload the browser to begin capturing WebSocket traffic.
  6. Reproduce the issue while the network requests are recorded.
  7. Click the download icon and select Export HAR to download the file.
  8. Save the .HAR file to your local device.

image
image683×578 92.2 KB

Capturing WebSocket Details in Microsoft Edge:

To capture WebSocket details in Microsoft Edge, follow these steps:

  1. Right-click on the webpage where the issue is occurring and select Inspect or press F12 on your keyboard to open the Developer Tools panel.
  2. In the Developer Tools panel, click on the Network tab.
  3. Then, click on the WS (WebSocket) tab to filter WebSocket traffic.
  4. Check the Preserve log checkbox to ensure that network activity is captured even after the page reloads.
  5. Refresh the page to begin capturing WebSocket traffic.
  6. Perform the actions that trigger WebSocket communication, so the network traffic is recorded.
  7. Once the activity is captured, right-click on any of the WebSocket requests in the WS tab.
    Select Save all as HAR with content to download the .HAR file.
  8. Choose a location on your device to save the .HAR file.

image
image995×779 170 KB

Important Notes:

  • Be cautious when sharing a .HAR file, as it may contain sensitive data like cookies, tokens, and other personal information transmitted over the network.
  • .HAR files are especially useful for diagnosing network issues related to page load performance, errors, and failed requests.

By following these steps, you can capture a .HAR file to assist with troubleshooting and improving network performance.