How To Capture And View Browser Developer Tool HAR Files ...

HAR files are a major source of information when troubleshooting Web based issues. They provide useful information from all major browsers about HTTP request parameters, as well as status responses and payloads. A great example of what the various HAR file fields report is shown here, which includes the break down the various stages of a browser request to Web server, from the DNS request, to the TCP connection, SSL handshake to finally sending the request and getting the initial and full response

Here are the procedures to generate HAR files on the most common browser platforms, Chrome/Firefox and IE.

CHROME: | MS EDGE:

1. In Chrome, hit the F12 key or Ctrl-Shift-I to launch Chrome's Developer Tools console. By default, the panel will open on the right side of the Chrome window.
2. In the Developer Tools panel, click on the Network tab
3. Check the Preserve log option
   • ensure that the circle icon in the upper-left of the Developer Tools pane is red, which indicates that your browser activity is now being recorded as a log. If the circle is black, click it until it becomes red.
   • If any events appear in the Developer Tools panel, click the Clear button to the right of the circle icon to remove them from the log
4. Browse to the Domain/Application/URL where the issue is being encountered and perform whatever steps are necessary to reproduce it
5. When you have successfully reproduced the issue, right-click on any of the logged events in the Developer Tools panel and click Save as HAR with Content
6. attach the saved HAR file to your support case

FIREFOX:

1. In Firefox, hit Ctrl-Shift-E to open the Web Developer Network console. By default, the panel will open on the bottom of the Firefox window.
2. Ensure that the Persist Logs option is checked
3. Browse to the Domain/Application/URL where the issue is being encountered and perform whatever steps are necessary to reproduce it
4. When you have successfully reproduced the issue, right-click on any of the logged events in the Web Developer panel and click Save All as HAR
5. attach the saved HAR file to your support case

INTERNET EXPLORER:

1. In IE, hit the F12 key to launch Internet Explorer's Developer Tools console. By default, the panel will open on the bottom of the IE window.
2. In the Developer Tools panel, click the Network tab
3. Deselect the option to Clear entries on navigate by clicking the icon pictured below:

​

4. Ensure that your session is being captured (represented by an arrow icon in the Network tab as seen above). If not, click Start profiling session (the green arrow icon in the upper left of the panel)
5. Browse to the Domain/Application/URL where the issue is being encountered and perform whatever steps are necessary to reproduce it
6. When you have successfully reproduced the issue, click Stop profiling session (the red square icon in the upper left of the panel)
7. Click Export as HAR (the disk icon in the upper left of the panel) or hit Ctrl-S to save the HAR file
8. attach the saved HAR file to your support case

How does one actually view this information once it is exported from the browser?