How to create HAR file and browser console logs?

This depends on the browser you’re using, please choose the section corresponding to your browser:

If you have any issues creating those files no worries. Just mention it in your support ticket and we’ll set up a quick call with you to guide you through this process.

Google Chrome

Console Log 

  1. Click on the three dots in the top-right of the browser. 

  2. Click More tools > Developer Tools to open the Developer Tools panel.

  3. Click the Console tab and select Preserve log in the top menu panel. 

  4. Click the Clear button in the upper-left of the panel to clear any existing logs. 

  5. Click the settings gear on the right of the panel and select Preserve log.

  6. Replicate the issue that you experienced in the browser. 

  7. Right-click the Console panel and select Save As to save the log to your local hard drive. You can attach this file to your support ticket if the support team requests it.

  8. Unselect the Preserve log option from the menu panel and click the Clear button in the upper-left of the tab to clear the log from the browser.

HAR file

  1. Click the three dots in the upper-right corner of the browser window. 

  2. Click More Tools > Developer Tools to open the Developer Tools console 

  3. Click the Network tab

  4. Click the Clear  button in the upper-left corner of the tab to clear any existing logs. 

  5. Click the checkbox to select the Preserve Log box option. 

  6. Locate the round Record button in the upper-left corner of the tab to start recording.
    💡 Tip: If the Record button is grayed out it is not recording. If it is red/highlighted, it is recording.

  7. Replicate the issue that you were facing in the Chrome browser.

  8. After replicating, right-click the panel and select Save As to save the HAR file to your local drive. You can attach this file to your support ticket if the support team requests it.

  9. Click to uncheck the Preserve Log checkbox and click the Clear button in the upper-left corner of the tab to clear the log from the browser.

Microsoft Edge 

Console Log

  1. Click the three dots in the upper-right corner of the browser window.

  2. Click More tools > Developer Tools to open the Developer Tools panel 

  3. In the DevTools panel, click the Console tab. 

  4. Right-click the console and select Clear Console of any pre-existing logs. 

  5. Check the Preserve Log checkbox. 

  6. Replicate the issue that you experienced in the Edge browser. 

  7. Right-click the console log and select 'Save as' to save the log in a file on your local drive. You can attach this file to your support ticket if the support team requests it.

  8. Uncheck the Preserve Log checkbox, right-click the Console panel, and select Clear Console to clear the log from the browser.

HAR file

  1. Click the three dots in the upper-right corner of the browser window.

  2. Click More tools > Developer Tools to open the Developer Tools panel 

  3. Click the Network tab at the top of the Developer Tools panel.
    💡Tip: The Network button may be hidden if your browser window is too small. If you are unable to see the Network button, click the double arrows icon at the top of the Developer Tools panel

  4. Click the Clear button in the upper-left of the tab to clear any existing logs. 

  5. Check the Preserve Log checkbox. 

  6. Locate the round Record button in the upper-left corner of the tab to start recording.
    💡 Tip: If the Record button is grayed out it is not recording. If it is red/highlighted, it is recording.

  7. Replicate the issue that you were facing in the Edge browser.

  8. After replicating, click the Export HAR button. You can attach this file to your support ticket if the support team requests it.

  9. Uncheck the Preserve Log checkbox and click the Clear button in the upper-left of the tab to clear the log from the browser.

Mozilla Firefox 

Console Log

  1.  In the Mozilla Firefox browser window, click on the three horizontal lines (also known as the hamburger icon)  in the top-right of the browser window

  2. Click on More Tools > Web Developer Tools to open the Web Developer Panel. 

  3. Click on the Console tab. 

  4. Click the garbage can  icon on the left of the panel to clear any pre-existing logs.

  5. Click on the gear icon on the right-hand side of the Console Panel and select Persist Log

  6. Ensure the Debug and XHR filters are enabled.

  7. Replicate the issue that you experienced in the Firefox browser. 

  8. Right-click the Console panel and click on "Save all as Messages to File” to directly save the console log on your local drive. You can attach this file to your support ticket if the support team requests it.

  9. Unselect the Persist Log button on the right of the Console panel and click the garbage can icon on the left of the panel to clear the log from the browser. 

HAR File

  1.  In the Mozilla Firefox browser window, click on the three horizontal lines (also known as the hamburger icon) in the top-right of the browser window.

  2. Click on More Tools > Web Developer Tools to open the Web Developer Panel. 

  3. Click on the Network tab. 

  4. Click on the garbage can icon on the left of the Network panel to clear any pre-existing logs. 

  5. Click on the gear icon on the right-hand side of the Console Panel and select Persist Log.

  6. Replicate the issue that you were facing in the Firefox browser- the recording will autostart. 

  7. Right-click in the Network panel and click Save all as HAR to save to your local drive. You can attach this file to your support ticket if the support team requests it.

  8. Unselect the Persist Log option by clicking the gear icon   on the right of the Network panel. Click the garbage can icon on the left of the panel to clear the log from the browser.

 

If you have any issues creating those files no worries. Just mention it in your support ticket and we’ll set up a quick call with you to guide you through this process.