How to Collect a Network Trace File from a Browser

1 min read

In this article, I'm going to share how to capture and download a network trace file (.HAR) for analyzing any errors displayed on IBM Cloud services. 

The network trace file is often requested by support engineers during their investigation, so if you attach it when you raise a case, it can help expedite the process.

Capturing the network trace file on Google Chrome

  1. Open Google Chrome and go to the page where the issue is occurring.
  2. From the Chrome menu bar, select View > Developer > Developer Tools.
  3. From the panel that opens, select the Network tab.
    From the panel that opens, 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 Preserve log box.
    From the panel that opens, select the Network tab.
  6. Click the Clear button to clear out any existing logs from the Network tab.
    From the panel that opens, select the Network tab.
  7. Reproduce the issue you are having.
  8. Once you have reproduced the issue, right-click anywhere on the grid of network requests, select Save all as HAR with content, and save the file to your computer.
    Once you have reproduced the issue, right-click anywhere on the grid of network requests, select Save all as HAR with content, and save the file to your computer.

Capturing the network trace file on Firefox

  1. Open Firefox and go to the page where the issue is occurring.
  2. Select the Firefox menu (three horizontal parallel lines) at the top-right of your browser window, then select Web Developer > Network
    har5
  3. The Developer Network Tools opens as a docked panel at the side or bottom of Firefox. Make sure you are on the Network tab. 
    The Developer Network Tools opens as a docked panel at the side or bottom of Firefox. Make sure you are on the Network tab. 
  4. The recording starts automatically when you start performing actions in the browser. Click on the trashcan icon to clear everything first.
    The recording starts automatically when you start performing actions in the browser. Click on the trashcan icon to clear everything first.
  5. Reproduce the issue you are experiencing on the UI.
  6. 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
    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

Summary

By following the steps outlined above, you can forward the .HAR file to the support team to expedite the support process. It can also help troubleshoot UI problems in your own Cloud Foundry app.

Be the first to hear about news, product updates, and innovation from IBM Cloud