How to collect a network trace file from a browser

textures formed by the bubbles and drops floating in water with colors in background.

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.
Screenshot showing how to select the Network tab in the Developer Tools panel

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.

Screenshot showing the Preserve log box in the Network tab in the Developer Tools

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

Screenshot showing how to clear any existing logs from 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.

Screenshot showing how to save the network activity as a HAR file

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.
Screenshot showing how to access the Network panel on Firefox

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.

Screenshot showing the Network tab interface

4. The recording starts automatically when you start performing actions in the browser. Click on the trashcan icon to clear everything first.

Screenshot showing how to clear existing logs using the trashcan icon within the Network tab

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.

Screenshot showing how to save the network activity as a HAR file

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.

Author

Kazuki Nobutani

Staff Software Engineer - IBM Cloud Support