Tips, Tricks & Best Practices

jennysowyrda
Community Manager
Community Manager

Troubleshooting Toolkit: Collecting a HAR file and Trace information

When it comes to websites, we all know there is more information than what is on the page level. Sometimes in order to troubleshoot a specific issue, HubSpot Support needs a deeper level of information than the error message on the screen, or a screenshot of what isn’t loading. The HAR file and Trace information can be a valuable piece of content to assist with troubleshooting complex website issues, and you may be asked to send a HAR file and Trace information to HubSpot Support.

 

How to collect a HAR file

 

A HAR file is a log of activity between an internet browser and a website, and can be accessed through the inspector tool within your web browser.

 

If you are requested to get a HAR file, please follow the steps below. These steps are specific to Google Chrome, which is available for download here.

 

1. Open Chrome and navigate to the page where the issue is occurring.

 

2. Right-click on your screen and choose “inspect”.

 

3. Select the “network” tab.

 

4. Check the “preserve log” and “disable cache” checkboxes.

 

You will want to ensure that your network tab is recording by looking for the red record button:

Screen Shot 2017-06-20 at 3.57.54 PM.png. If it is grey or black, click it to begin recording. If you have any activity that already loaded in your network tab, you can clear it by clicking clear: 

Screen Shot 2017-06-20 at 3.45.21 PM.png

 

5. Perform the action, or reload the page, that is causing the issue with the network tab open and recording.

 

6. Once you have completed the action and the network tab has loaded all the content, right click within the inspector tool, and select “save as har with content”.

 

7. Save the file to the desired location on your computer and then attach it to your Support ticket.HAR FILE EXAMPLE.gif

Spanish translation available here.

Portuguese translation available here.

French translation available here.

German translation available here.

Japanese translation available here.

 

How to collect a HAR when connecting with an OAuth integration

 

When connecting with an OAuth integration, such as Gmail or O365, there are additional steps needed to collect a HAR file.

 

1. Navigate to Settings > Integrations > Email Integrations > Connect your inbox.


2. Select Gmail or O365, depending on your email provider. A new tab will open.


3. Close original HubSpot tab.


4. Right-click on the new tab that is opened, choose “inspect”.


5. Select the “network” tab.


6. Check the “preserve log” and “disable cache” checkboxes.


7. Continue through the step of entering your Gmail or O365 information.


8. Once you have completed the action and the network tab has loaded all the content, right click within the inspector tool, and select “save as har with content”.


 9. Save the file to the desired location on your computer and then attach it to your Support ticket.

 

How to collect Trace information


Trace information provides data about your connection to the website. This can be collected by using the 

 

/cdn-cgi/trace

 

endpoint.

 

1. Enter example.com/cdn-cgi/trace from a web browser and replace example.com with your domain name.

CleanShot 2023-05-18 at 14.47.59.png

 

2. Copy the information and add it to your Support ticket along with the HAR file.

 

If you experience any issues gathering this information, please post your question in the Community.

3 Replies 3
HelenaLatimer
HubSpot Product Team
HubSpot Product Team

Troubleshooting Toolkit: Collecting a HAR file and Trace information

Directions for Safari

 

To gather a HAR file in Safari you will need access to the Developer Tools for Safari. This Apple help doc shows how to enable the Developer Tools.

 

  1. Navigate to the page where the issue is occurring
  2. Right click on the page and choose Inspect Element
  3. Click the Network tab
  4. Click the trash can icon to clear any existing logs in the Network tab
  5. Refresh the page and reproduce the issue

Click Export HAR to save the HAR file

 

safari har file.gif

HelenaLatimer
HubSpot Product Team
HubSpot Product Team

Troubleshooting Toolkit: Collecting a HAR file and Trace information

Directions for Edge

 

To gather a HAR file in Edge:

 

  1. Navigate to the page where the issue is occurring
  2. Click on the menu in the top right hand corner (three dots)
  3. Choose Developer Tools
  4. Click the Network tab
  5. Click the three bars with an X over them (2020-01-09 17_30_49-Microsoft Edge.png) to clear existing logs
  6. Refresh the page and reproduce the issue

Click the save button to save the HAR file

 

edge har file.gif

HelenaLatimer
HubSpot Product Team
HubSpot Product Team

Troubleshooting Toolkit: Collecting a HAR file and Trace information

Directions for Firefox

 

Hi all! To gather a HAR file in Firefox:

  1. Navigate to the page where the error is occurring
  2. Right click on the page and click Inspect Element
  3. In the panel that opens, click the Network tab
  4. Ensure that the boxes for Persist Logs and Disable Cache are checked
  5. Click the trash can icon on the left to remove any logs that are already visible in the Network tab
  6. Refresh the page and reproduce the issue
  7. Once you have reproduced the issue, you will see logs loading in the Network tab. After they have finished loading, right click on one of the requests and select Save all as HAR

firefox har file.gif