In order to better troubleshoot and investigate a web application error, it can be a good idea to collect browser traffic and console errors through exporting a .HAR file in Developer Tools and providing this to your support agent. This quick guide will show you how to capture this data in your browser when using a chromium type browser i.e., Google Chrome or Microsoft Edge. 

 

Step 1: Preparing to capture the data 

Either press F12 or CTRL+SHIFT+I on your keyboard or do the following: 

  1. Navigate to the settings option on the top right of the browser 
  2. Select More Tools 
  3. Select Developer Tools


Graphical user interface, website Description automatically generated


Step 2: Starting the capture 

Once you have Developer Tools open do the following: 

  1. Select the double arrow (>>) and make sure Network visible 
  2. Once the Network tab is open, you can click the record button to start or stop a capture 
    1. If the icon is red this means recording of web traffic is in progress. 
  3. You can use the button directly to the right of the record button to clear a capture if it was started prematurely etc. 
  4. Another good practice is to make sure Preserve Log is enabled; this will prevent the log from clearing as some sites will auto refresh a page. 

A screenshot of a computer Description automatically generated with medium confidence
 

Step 3: Downloading your capture (.HAR file) 

Once you have started your recording, you will notice data will start populating as soon as you start navigating around any site i.e., click on Modules TAB. 

  1. Make sure this icon is red to ensure your capture is recording. 
  2. If you see data populating here, the capture is working 
    1. You will only see data here if you are actively clicking and navigating through a site 
  3. Once you have captured what you set out to, such as replicating an error you are encountering, click the downward arrow button to download your file (.HAR file). 


A picture containing text, indoor, display, screenshot Description automatically generated


Step 4: Save the file and provide to the  Support Portal 

After you have downloaded the file, please do the following: 

  1. Name the file something appropriate 
    1. Best practice SITENAME_DATETIMESTAMP 
  2. Save the file to your local PC  
    1. After saving the file, please make sure to get this to your support agent either via email or through the ticketing system. 

Graphical user interface, text, application Description automatically generated




Step 5: Uploading your file to the Support Portal 

Once you have your .HAR file login to the Support Portal and submit a ticket with your attachment and do the following: 

  1. After you have entered your other mandatory fields for the ticket submission, attach your .HAR file by selecting + Attach a file in blue. 
  2. Find your saved file and click open to upload the file so it can be submitted with your ticket. 
    1. Make sure all mandatory fields are filled in and Submit the ticket. 


 


 If you have an existing ticket, the interface will look slightly different; however, the same steps as above can be carried out to upload your ticket. See screenshot below.