How to generate HAR file to export and analyse network request logs?

Wiki How To's
, , ,
1

The HTTP ARchive (HAR) format is a JSON-formatted archive file that records all network interaction between a web browser and site.

HAR files contain information, such as page rendering, performance issues, and web browser versions, which helps developers when troubleshooting various issues that involve apps or websites.

Network logs can be captured and exported as a HAR file with the .har extension. The HAR file can be viewed with HAR viewer [2], HAR Analyzer [3], or any other tool of your choice available on the Internet.

Note:

  1. HAR files will have sensitive information such as personal information, API keys, passwords, and other details sent or received over the network communication.
  2. The HAR viewer [2], HAR Analyzer [3] are not Freshworks products. Use them at your own discretion.
  3. The browsers our platform support are listed here. [1]

Chrome

Steps
  1. Go to the page where the app is loaded.
  2. From the menu bar, navigate to More Tools → Developer Tools.
  3. Click the Network tab, the Network panel [4] is displayed.
  4. Check the Preserve log checkbox.
  5. With the Network tab open, reproduce the issues for delayed or failed API requests in the app. The relevant network logs are captured.
  6. Click the download icon, which displays “Export HAR…” on mouse hover, to export the network logs in the HAR file format.
  7. The downloaded file can be shared with others to analyze the network activity and troubleshoot the issue.

Firefox

Steps
  1. Go to the page where the app is loaded.
  2. From the menu bar, navigate to Web Developer → Network. The Network panel is displayed in the developer tools.
  3. Check the Persist logs checkbox.
  4. With the Network tab open, reproduce the issues for delayed or failed API requests in the app. The relevant network logs are captured.
  5. Click the HAR drop-down or right-click any record in the logs and then click the Save All As HAR option to export the network logs.
  6. The downloaded file can be shared with others to analyze the network activity and troubleshoot the issue.

Safari

Steps

Follow the steps in page [5] to enable the Develop option to appear in the menu if it is not available.

  1. Go to the page where the app is loaded.
  2. From the Develop menu, select Show Web Inspector.
  3. Click the Network tab, the Network panel is displayed.
  4. Check the Preserve log checkbox.
  5. With the Network tab open, reproduce the issues for delayed or failed API requests in the app. The relevant network logs are captured.
  6. Click the Export icon to export the network logs in the HAR file format.
  7. The downloaded file can be shared with others to analyze the network activity and troubleshoot the issue.

Edge

Steps
  1. Go to the page where the app is loaded.
  2. From the menu bar, navigate to More Tools → Developer Tools.
  3. Click the Network tab, the Network panel is displayed.
  4. Check the Preserve log checkbox.
  5. With the Network tab open, reproduce the issues for delayed or failed API requests in the app. The relevant network logs are captured.
  6. Click the download icon, which displays “Export HAR…” on mouse hover, to export the network logs in the HAR file format.
  7. The downloaded file can be shared with others to analyze the network activity and troubleshoot the issue.

Reference Links:
[1] Freshworks Developer Docs | Freshworks app ecosystem
[2] HTTP Archive Viewer 2.0.17
[3] HAR Analyzer
[4] Herramientas para desarrolladores de Chrome  |  DevTools  |  Chrome for Developers
[5] Use the developer tools in the Develop menu in Safari on Mac - Apple Support (IE)

3 Likes