How to capture and view browser Developer Tool HAR files exported when troubleshooting Cloud SWG issues

Products

• Cloud Secure Web Gateway - Cloud SWG
• ProxySG Software - SGOS

Issue/Introduction

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?

Environment

All Cloud SWG access types where users report application or performance issues on browsers

Cause

N/A

Resolution

There are two  main options:

1. import the HAR file into the following Google online URL:  This provides an easy interface to view timing info, as well as request / response HTTP headers and response payloads. The only concern is that you may be uploading internal information to a public site

2. Using Fiddler: After downloading and installing Fiddler locally on a workstation, you can open HAR files with Fiddler by doing the following:

1. Launch Fiddler
2. Click File->Import Sessions...
3. In the Select Import Format window that appears, select HTTPArchive in the drop-down box and click Next
4. select the HAR file you saved in the previous steps and click Open

 The advantage with Fiddler is that any sensitive corporate Application stays internal.