Skip to main content

Chrome Browser Logs

Anthony Wong

To allow for more advanced troubleshooting, it may be useful to observe Sharpen's debug mode console tracing, as well as Chrome Network logs. These logs allow for the population of more granular Q data within the console log including the socket event, currentlocation, queue call manager ID, caller ID, and timeliness of transactions. This article explains how to gather…

  • Chrome console logs with debug mode, time stamps, and persistence enabled

  • Chrome network logs with persistence enabled

Video Tutorial

This video tutorial shows the setup process, a test call, and log gathering. The test call is meant to represent the issue you may be experiencing. Performing the test call is not a required part of the process.

Getting started

The first step in advanced browser troubleshooting is gaining access to the Chrome dev console. Simply right click in the browser area and choose "Inspect".

image2019-10-14_14-57-26.png?version=1&modificationDate=1571079447955&cacheVersion=1&api=v2&width=263&height=250

You're there!

Now onto the good stuff.

Sharpen Console logs with debug mode:

To enable debug logging, it is important to consider which operating system you're running. Steps to enable debug mode are slightly different. Please follow the steps below depending on whether you're running Windows or MacOS.

Windows:

  1. Navigate to the appropriate view of Sharpen within app.sharpencx.com in Google Chrome

  2. Click in an open space within the app

  3. Press Ctrl + M on your keyboard

    1. You should a message in the Console Logs for “debug mode on”

      Screen Shot 2021-04-21 at 12.25.52 PM.png

  4. Right-click in any empty space and choose "Inspect" 

  5. Navigate to the "Console" tab

  6. To toggle off, simply press Ctrl + M again

    1. You should a message in the Console Logs for “debug mode off”

  7. If Option M does not work, please use the steps in the “A different OS?” section below

Mac:

  1. Navigate to the appropriate view of Sharpen within app.sharpencx.com in Google Chrome

  2. Click in an open space within the app

  3. Press Option + D on your keyboard

    1. You should a message in the Console Logs for “debug mode on”

      Screen Shot 2021-04-21 at 12.25.52 PM.png

  4. Right-click in any empty space and choose "Inspect" 

  5. Navigate to the "Console" tab

  6. To toggle off, simply press Option - D again

    1. You should a message in the Console Logs for “debug mode off”

  7. If Option D does not work, please use the steps in the “A different OS?” section below

A different OS?:

Screen Shot 2021-04-21 at 12.30.53 PM.png

  1. Navigate to the appropriate view of Sharpen within app.sharpencx.com in a Chromium based browser

  2. Right-click in any empty space and choose "Inspect" 

  3. Choose the "Sources" tab

  4. Observe the pane on the right side of the screen and find the "Watch" sub panel

  5. Click the "+" button

  6. Enter localStorage.debug=true

  7. Hit Enter

  8. Refresh your browser

    1. You should a message in the Console Logs for “debug mode on”

      Screen Shot 2021-04-21 at 12.25.52 PM.png

  9. Navigate back to the console tab

  10. To toggle off, simply adjust the value to false

Enabling timestamps and log persistence in console logging:

Now, with debug mode enabled, we're getting more details events about Sharpen Q. The next step is to make sure time stamps are enabled so we can see when events are occurring.

  1. After inspecting the page, navigate to the "Console" tab.

  2. Look for the Gear Icon, next to the three vertical dots, to navigate to Settings

    Screen Shot 2021-04-21 at 1.25.15 PM.png

  3. Make sure the following preferences are checked:

    1. Under Console

      1. Show timestamps

      2. Preserve log upon navigation

    2. Under Network

      1. Preserve log

Screen Shot 2021-04-21 at 1.27.59 PM.png

Reproducing the issue:

Logging is all setup. We're ready to reproduce the issue. Upon every reproduction it is best practice to clear out the logging for the console and network tabs before getting started.

  1. Navigate to the "Console" tab

  2. Click the "Clear Console" button

    image2019-10-14_15-10-43.png?version=1&modificationDate=1571080244883&cacheVersion=1&api=v2

  3. Navigate to the "Network" tab

  4. Click the "Clear" button

    image2019-10-14_15-11-58.png%3Fversion=1&modificationDate=1571080319526&cacheVersion=1&api=v2?version=1&modificationDate=1583182927065&cacheVersion=1&api=v2

  5. Reproduce the issue

Saving the logs:

Once we've reproduced the issue, it is very important to download both the Console and Network logs before exiting the browser.

Saving console logs:

  1. Navigate to the "Console" tab

  2. Right-click in the log space

  3. Choose "Save As..."

  4. Leave the file name as is, and save to a known directory

Saving network logs:

  1. Navigate to the "Network" tab

  2. Click the "Export HAR" button

  3. Unlike the Chrome console log, the default file name does not contain a time stamp. Add a date/time reference to the file name and save to a known directory.

image2019-10-14_15-20-14.png?version=1&modificationDate=1571080816097&cacheVersion=1&api=v2

At this point you're ready to package the files and send them to Sharpen. Simply zip them up and send them to SharpenCare with the associated case.

Powered by Zendesk