8x8 Community

My Services Express Jitsi as a Service 8x8 Connect 8x8 Work for Web

Gathering Browser Network and Console Logs (HAR File) to Diagnose GUI Issues in a Browser

Updated: 11/04/2024

Objective

Gather browser network logs to help diagnose any 8x8 Web Application symptoms or issues.

Applies To

  • Web Browsers
  • Troubleshooting

Procedure

Before running the capture, ensure that:
  • The user is logged on.
  • Press F12 then F5 before the issue occurs to ensure that the browser logs are turned on.
  • Ensure that the issue is captured before downloading and saving the file.
  1. Open the browser. If you are using the browser in incognito mode, ensure that you un-select block third party cookies.
  2. Log in to your 8x8 Application (Contact Center, Analytics for Contact Center) and right-click and select Inspect or press F12 to open the developer console before the issue occurs. The developer console will need to remain open throughout the process. If closed, logs will be lost.
    It is very important that F12 then F5 are pressed before the issue occurs otherwise the data is incomplete and will not be useful as it wont have collected the data needed.
    • In Chrome it will bring up a side panel.

      2018-12-19_10-28-57.png

       
    • In Firefox it will look like this.

      2018-12-19_10-30-10.png
  3. Press F5 to refresh the screen.
  4. Review the Network tab.
    • Chrome example:

      2018-12-19_10-33-37.png
    • Firefox example:

      2018-12-19_10-36-33.png
  5. Enable logging:
    • In Chrome click Preserve Log on both the Network and Console tabs.

      2018-12-19_10-38-17.png
    • In Firefox select Settings > Persist Logs on both the Network and Console tabs.

      2018-12-19_10-41-21.png

Saving Network Logs (HAR File)

When the issue occurs then follow the below steps and then attach the saved.HAR file to the case or email to us for investigation.

Chrome

  1. Right click in the main body.
  2. Click Save as HAR with content.

    2018-12-19_10-43-44.png
  3. Find a location to save to > click Save.

Firefox

  1. Click HAR (far right).
  2. Click Save All As HAR.

    2018-12-19_10-46-34.png
  3. Click Save file to save in download folder.

    2018-12-19_10-48-29.png
  4. Click OK.

Microsoft Edge

  1. Select the horizontal ellipsis menu button.
  2. Select More Tools.
  3. Select Developer Tools.
  4. Select the Network tab.
  5. Select Record in the upper left corner of the tab and verify that it is red.
  6. If it is grey, click it to start recording.

Saving Console Logs

Chrome

  1. In the Chrome developer console Console tab, right-click anywhere in the pane and select Save as.
  2. Save the LOG file.

Firefox

  1. Select the Console tab.
  2. Select Settings (gear icon) and select Persist Logs. 
  3. Select Settings again and select Show Timestamps. 
  4. Leave the console open and perform the steps that reproduce the issue.
  5. Right-click any line and select Save all Messages to File.
  6. Save the file. Note: If you copy or move log files soon after saving, they can break. Wait for the data transfer to complete after saving the file and then, move the file to a different location or upload the file to your 8x8 Support ticket.
Workaround for Chrome 130 HAR File Issue
When gathering HAR files with Chrome v 130 there is a know issue—the file comes blank. There is a workaround to copy the content and paste into a text file.

HAR File Workaround for Chrome v 130

  1. Open the Chrome Developer Tools.
  2. Select Settings.
  3. Under Preferences > Elements, check the box to enable Allow to generate HAR with sensitive data.
  4. After generating the logs, right-click the desired file.
  5. Select Copy > Copy all as HAR (with sensitive data).
  6. Open Notepad or any text editor and past the copied file.
  7. Save the copied text as .har file.
  8. Upload the file to your 8x8 Support ticket.