How to retrieve HTTP archive files (HAR)

GOAL

Retrieve more information when interacting with backend systems (Anypoint Platform in this case) from a web browser. Possible issues:

• upon a request (getting a list of items, charts, etc.) the browser displays a different response from the expected one
• performance issues while accessing the backend

PROCEDURE

Please choose a browser:

• Google Chrome
• Firefox
• Safari

Note:

• Before sharing HAR files with Support, please sanitize all sensitive information, including password, cookie, token, etc.
• Other browsers do provide the means to extract HTTP archive files in a similar way.
• Due to a known limitation, Google Chrome cannot capture the response payload if there's a redirect to another page. In this case, please consider using Firefox. 

Google Chrome

If you need to capture both HAR file and console logs follow the steps here

Or follow the steps below for only HAR file.

How to capture a HAR file using Google Chrome:

1. In Google Chrome, click the three dots on the top right of your browser
2. Go to "More Tools" -> "Developer Tools"
3.  
4. Click "Network"
5. Click "Preserve log" to keep the logs when the browser navigates to a new page and tick "Disable cache"
6. 
7. Reproduce the issue (make sure the Network panel is still there)
8. When you are done reproducing the issue, click the downward arrow
9. 
10. It will download a file ending in .har (you can rename the file, but do not delete the .har)
11. 
12. Save the file and attach it to your support case

Now, the extracted file will contain all the requests and responses which should be further analyzed.

To automatically open Chrome developer tools in a new tab, please add below steps.
1. Open Chrome Developer tool, click Setting button on the top right corner(the gear icon)
2. Turn ON "Auto-open DevTools for popups"

Please be aware that on occasion Chrome can fail to correctly write the HAR file, this is especially true for very javascript heavy pages. To ensure that the file is valid please visit the following page: https://toolbox.googleapps.com/apps/har_analyzer/ and ensure that the HAR file is correctly read by this tool. If the tool is unable to parse the file this will need to be saved by the following steps:

1. In Google Chrome open the Developer Tools (Settings -> More Tools -> Developer Tools)
2. Switch to Network panel
3. Start recording Network log
4. Check Preserve log to keep the logs when the browser navigates to a new page
5. Go to the desired web page and perform the requests
6. Right Click in Network panel and choose "Copy" > "Copy all as HAR"
7. Open a plain text editor and paste the contents into a file.
8. Save the file with the HAR extension, e.g. "example.har"
9. Confirm this loads correctly in https://toolbox.googleapps.com/apps/har_analyzer/

Firefox

Please follow the steps below: 

1. In Firefox open "More Tools" -> "Web Developer Tools"
2. Switch to Network panel
3. Choose "Persist Logs"
   • 
4. Go to the desired web page and perform the requests
5. In the same place as step 3, choose "Save All As HAR"
6. Save the file

 

Safari

1. Open Safari and navigate to the page where the issue is occurring. 
   Note: This is tab and window dependent, so if the issue occurs in a new tab or window, the HAR recording needs to be done in that new tab or window.
2. Click the Develop menu and select Show Web Inspector.
   1. If the Develop menu does not display in the menu bar, click the Safari menu and click Preferences.
   2. Click Advanced, then select Show Develop Menu in the Menu Bar.
3. Click the Network tab and reproduce the issue that was being experienced while the network requests are being recorded. Note: Do not close the Network tab.  This will end recording and the needed HAR file will be lost.
4. Once the issue has been reproduced, click the Export icon and save the file to the computer.
5. Attach the HAR file to the email to send to Support.