Capturing Web Traffic in Your Browser

Modified on Fri, 10 Jun, 2022 at 9:32 AM

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:

Navigate to the settings option on the top right of the browser
Select More Tools
Select Developer Tools

Graphical user interface, website
Description automatically generated

Step 2: Starting the capture

Once you have Developer Tools open do the following:

Select the double arrow (>>) and make sure Network visible
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.
You can use the button directly to the right of the record button to clear a capture if it was started prematurely etc.
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.

Make sure this icon is red to ensure your capture is recording.
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
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:

Name the file something appropriate
1. Best practice SITENAME_DATETIMESTAMP
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:

After you have entered your other mandatory fields for the ticket submission, attach your .HAR file by selecting + Attach a file in blue.
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.