How to Collect a Network Trace File from a Browser

Problem

The network trace file is often requested when we suspect the GET, POST, PUT call from the UI is getting dropped in between the UI and the backend servers.

Environment

• Platform9 Management Plane UI - Any version.

Procedure

Capturing the network trace file on Google Chrome browser.

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.
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.
6. Click the Clear button to clear out 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.

Capturing the network trace file on Firefox browser.

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.
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.
4. 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 A s HAR.

Additional Information

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.