How to capture and preserve network requests from a browser - HAR file capture

Products

• Operations Manager

Issue/Introduction

This KB article discusses the process of capturing an HTTP Archive (HAR) file to log and preserve network requests involved in accessing any web GUI related to Tanzu Application Service (TAS).

In some cases, in order to troubleshoot issues within a web GUI, it may be necessary to capture network requests made by the browser. Modern Web Browsers, such as Google Chrome or Firefox, have access to developer tools which can record these requests and their responses which can then be saved as an HTTP Archive (HAR) file.

Environment

Applies to all environments.

Resolution

How to generate a HAR file in Chrome:

1. In Chrome, navigate to the application/site you are experiencing trouble. 
2. Select the Chrome menu (⋮) at the top-right of your browser window, then select Tools > Developer Tools.
3. The Developer Tools opens as a docked panel at the side or bottom of Chrome. Click on the Network tab.
4. Select the option Preserve log
5. The recording should autostart and you will see a red circle at the top left of the Network tab. If not, click the black circle to start recording activity in your browser.
6. Refresh the web page you are on and reproduce the problem.
7. Once you've encountered the problem successfully while recording, right-click within the Network tab and click Save as HAR with Content to save a copy of the activity that you recorded.
8. Save the HAR file to your computer.

How to generate a HAR file in Firefox:

1. In Firefox, navigate to the application/site you are experiencing trouble. 
2. Select the Hamburger menu (three horizontal parallel lines) at the top-right of your browser window, then select Developer > Network.
3. The Developer Network Tools will open as a docked panel at the side or bottom of Firefox. Click on the Network tab.
4. The recording will autostart once you start interacting with the website.
5. Refresh the web page you are on and reproduce the problem.
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" to save a copy of the activity that you recorded.
7. Save the HAR file to your computer.

How to generate a HAR file in Microsoft Edge:

1. In Microsoft Edge, navigate to the application/site you are experiencing trouble.
2. Click on the 3 dots (⋮) at the top-right of your browser window, then select > More Tools > Developer Tools
3. Select the Network panel tab (you may need to click on >> and choose from a drop down list).
4. Make sure Preserve log is ticked.
5. Click on the concentric circle button (Or use the keyboard shortcut CTRL+E or Command+E) to start recording the session. The button will turn red and replace the filled inner circle with a filled square.
6. Refresh the page to replicate the error and allow Edge to record the browser-website interaction.
7. Select the same filled square button to stop recording the session.
8. Select the Export HAR button to export the recorded session to a HAR file. The button looks like an arrow pointing downwards to a horizontal line. It's on the same row as the Preserve log box. If you can't see it, you would need to resize the vertical bar and resize the Developer Tools window.