How to generate a HAR file

Objective

If you're facing a complex issue in the Contrast interface, Contrast might request that you send a HAR file to help the support teams fix the problem more quickly.

A HAR file helps troubleshoot the following issues:

• Slow page load
• Timeout when performing certain tasks
• Incorrect page format
• Missing information after rendering

Process

Google Chrome

• Open Chrome and navigate to the page where the issue is occurring.
• From the Chrome menu bar select View > Developer > Developer Tools, or right click on the page and select Inspect Element.
• From the panel that opens at either the bottom or side of your screen, select the Network tab.
• Look for a round Record button in the upper left corner of the Network tab, and make sure it's red. If it's gray, click it once to start recording.
• Check the box next to Preserve log.
• Try to reproduce the issue that you were experiencing while the network requests are recording.
• Once you've reproduced the issue, right click anywhere on the grid of network requests, select Save as HAR with Content, and save the file to your computer.
• Upload your HAR file to your ticket or attach it to an email so that Contrast can analyze it.

The following GIF demonstrates the process:

Firefox

• Open Firefox and navigate to the page where the issue is occurring.
• From the Firefox menu select Web Developer > Network or hit F12.
• Select the Network tab in the panel that opens at the bottom of the window if is not already focused.
• From the Gear menu at top right of this panel, ensure Persist logs is checked.
• Try to reproduce the issue that you were experiencing while the network requests are recording.
• Once you've reproduced the issue, right click anywhere on the grid of network requests, select Save all as HAR, and save the file to your computer.
• Upload your HAR file to your ticket or attach it to an email so that Contrast can analyze it.

Microsoft Edge

• Open Edge and navigate to the page where the issue is occurring.
• From the Edge menu bar select the three dots (...) in the upper right hand corner to open the menu.  Choose More tools > Developer Tools, or right click on the page and select Inspect.
• From the panel that opens at either the bottom or side of your screen, select the Network tab.
• Look for a round Record button in the upper left corner of the Network tab, and make sure it's red. If it's gray, click it once to start recording.
• Check the box next to Preserve log.
• Try to reproduce the issue that you were experiencing while the network requests are recording.
• Once you've reproduced the issue, right click anywhere on the grid of network requests, select Save as HAR with Content, and save the file to your computer.
• Upload your HAR file to your ticket or attach it to an email so that Contrast can analyze it.

Safari

• Open Safari and navigate to the page where the issue is occurring.
• Confirm that the Develop menu is visible at the top of the window.
  • If the Develop menu option (next to Bookmarks) is not visible, then go to Safari > Preferences > Advanced and check the box, Show Develop Menu in menu bar 
• Navigate to Develop > Show Web Inspector
• Refresh the page to start capturing traffic.
• Reproduce the issue.
• Once you've reproduced the issue, right click anywhere on the grid of network requests, select Export HAR, and save the file to your computer.
• Upload your HAR file to your ticket or attach it to an email so that Contrast can analyze it.