Tool Overview

We are not able to get on calls with all of our clients. Increasingly, products are using restful API calls to micro-services. In order to troubleshoot issues associated with these products we need to examine the JSON / XML being sent and / or the cookie updates in the communication between the webpage application on our clients browser and our services.  We can use a HAR file to see the exact network traffic that occurred  while an end user performed a specific action. We can see all the requests and responses just as if we were there running Dev Tools networking tab on the clients machine.

Tool Setup

Where to get the tool

There are several sites we can use to view and analyze HAR files.

HAR Analyzer - G Suite Toolbox  (Google Website)

HTTP Archive Viewer (Chrome Extension)

HAR Viewer + Analyzer (Compare two HAR files)

Installation & Configuration Steps

-Follow directions for tool selected

-G Suite runs in browser, no installation necessary

How to Use It

How to Capture a HAR file

Depending on the browser, here are the ways to capture the HAR file, which you can then simply open in one of the tools above. These steps are assuming browsers are up to date. Clients using out of date browser software may have difficulty following these steps.

• Chrome/Edge
  • Top Right, click the three dots
  • More Tools
  • Developer Tools 
  • Network tab
  • Check “Preserve Log”
  • Perform Actions to reproduce Error
  • Right click anywhere in the table of data
  • Save as HAR with Content
  • Give it a useful name
  • Click “save"

• Safari 
  • Enable Developers Tool: Safari > Preferences > Advance > Click Show Develop menu in menu bar
  • Select Develop in menu > Show Web Inspector > Select Network Tab
  • Within the Networks tab, select Preserve log option.
  • Refresh the page and allow Safari to record the browser-website interaction. 
  • Once the page is loaded, click on Export on the top right in the window of the Network tab.

• FireFox 
  • Top Right
  • Menu 
  • Developer
  • Network 
  • Reproduce Issue 
  • Right click and “Save all as HAR”

• Internet Explorer
  • Top Right
  • Click the gear for "Tools"
  • Open Developer tools or press F12.
  • Activate the Network tab.
  • Reproduce the Issue
  • Click the "save" icon

Tips/Tricks

Quickly do X with Tool

• It is best to also capture a screen shot of Console Errors on the Console tab
• Make sure to clear the contents of the network tab (see image above) before clicking Submit or Next on the page the error is happening.
• Make sure to turn on Preserve log (see image above) so that the data you're trying to capture in the Network tab is not lost when the page changes on clicking next, etc.
• You can save the file with a .har extension by simply typing it after the name you're saving the file as.

How to Capture Performance Logs 

Here are the ways to capture the Performance Log file. These steps are assuming browsers are up to date. Clients using out of date browser software may have difficulty following these steps.

• Chrome/Edge
  • Top Right, click the three dots
  • More Tools
  • Developer Tools 
  • Click on Performance Tab
    • Check "Screenshots", "Web Vitals", "Memory"
    • When you're ready to record, click the circle at the far left, in the same row as the Screenshot and Web Vitals.  It will turn red when it's recording.
    • Perform Actions to reproduce Error
    • Click "Stop" after you've reproduced the error
  • Save the file as "Performance Log - <A Meaningful Name>" replace <A Meaningful Name> with the case number or other short, descriptive, example 
  • Click “save"
  • Upload this Performance log with the HAR to the AppSupport Case or box folder

How to Access the Performance Monitor

• Chrome/Edge (Screenshots below)
  • Top Right, click the three dots of the Developer Tools Window/Section
  • More Tools > Performance Monitor  
  • Click on Performance Monitor Tab next to Console
    • Click on checkmarks to select them
    • Increase the size of the Monitor window by clicking and dragging it up
    • Take a screenshot that captures the entire performance monitor
  • Rename the screenshot as "Performance Monitor - <A Meaningful Name>" replace <A Meaningful Name> with the case number or other short, descriptive, example 
  • Upload this Performance Monitor Screenshot with the HAR and Performance Log to the AppSupport Case or box folder

SMEs / References

App Support - Unknown User (avollmer), Unknown User (nbrijwasi), Taylor Johnson

More info -   HAR file troubleshooting

References/External Page Links: