Skip to main content

How do I use the Chrome Debugger to troubleshoot issues?

Updated over a month ago

When an issue requires deeper investigation, our Support team may request information from the Google Chrome debugger. This will give us more information to find a resolution.

To use the Chrome Debugger tool:

  1. Open the Google Chrome browser.

  2. Go to the page where you're encountering the issue.

  3. Access the Chrome debugger in one of the following ways:

      • Keyboard Shortcut: Press Ctrl+Shift+J (Windows/Linux) or Command+Option+J (Mac).

      • Right-click: Right-click anywhere on the web page you want to debug and select "Inspect".

      • Menu: Navigate to the Chrome menu (three vertical dots in the top-right corner), go to "More tools", and then select "Developer tools".

  4. Go to “Console” tab and clear and click the “clear console” icon highlighted in the image

  5. Go to the “Network” tab and click the “clear networking log” icon highlighted in the image

  6. Now try to make the problem happen again. Navigate the specific page and follow the steps that usually lead to the error, the system will catch all information.

  7. When the issue is facing again take the screenshots of both the “Console” and “Network” tabs with the listed errors.

  8. Attach the errors images in your Customer Support request ticket

    • This is an example of the Console listed errors

  • This is an example of the Network listed errors (Headers tab) Important: Here you'll scroll down to find the errors on the left column and then screenshot them one by one.

    Screenshot 2024-06-25 at 12.59.32.png

9. if you want to go the extra mile, whenever a networking error happens, you can take screenshots of the details.

  • Start by clicking on the network request that's causing the issue. Once you've selected the request, take a screenshot of the following tabs:

    1. Headers

    2. Payload

    3. Preview

  • Attach all the images to your customer support ticket request.

Did this answer your question?