How to Troubleshoot JavaScript Using Google Chrome Developer Tools

The Google Chrome web browser includes a variety of Developer Tools that can help you while maintaining various components of your website. For instance, you can use the Chrome Dev Tools to edit CSS and preview live changes.

Because of the versatility of Google Chrome’s Developer Tools you can also pinpoint errors in your code and edit the script(s) live. In this guide, you can learn how to use Google Chrome Developer Tools to troubleshoot JavaScript live on your website, without affecting the experience for your users.

Access Dev Tools

There are multiple ways to access the Developer Tools in Google Chrome. You can follow any of the steps from the list below.

  • With your web broser open, simultaneously press the Ctrl + Shift + i (for MacOS: command + option + i) keys on your keyboard.

  • Click on the three (3) dot menu icon. Hover your mouse of More tools. Then, select Developer tools.

  • Right-click anywhere on a web page. Select Inspect from the menu list.

  • Press the F12 key while on a web page–only on Windows/Linux.

Troubleshoot JavaScript

After opening the Dev Tools pane, several tabs will be displayed for you to choose from. The instructions in this section will guide you through an example that you can learn how to troubleshoot JavaScript with the Developer Tools available in Chrome.

  1. Using Incognito Mode, navigate to https://googlechrome.github.io/devtools-samples/debug-js/get-started in your Google Chrome Browser.

  2. Open the Developer Tools pane.

  3. Click on the Sources tab.

  4. In the File Navigator pane, under the Network tab, click on the get-started.js file and its code will be displayed in the Code Editor pane.

  5. Insert a line-of-code breakpoint to tell Dev Tools to pause the script execution, to help you determine bugs/fixes for the code you are troubleshooting –at the particular line you choose. To do this, simply click on the number (to the left of the line of code) in the Code Editor pane.

  6. Enter a value into the Number 1 and Number 2 fields on the actual page, then click on the Add Number 1 and Number 2 button.

  7. In the JavaScript Debugger pane, click on the arrow next to Scope to expand the view to display the Local and Global variable options. Then, click on the arrow next to Local to expand the view to include the current values of the variables.

  8. Now, enter the following line of code into the Console: parseInt(addend1) + parseInt(addend2) then, hit the Enter (for MacOS: return) key.

  9. Replace the code at line 31 with the following code: var sum = parseInt(addend1) + parseInt(addend2);. Then, press Ctrl + s (for MacOS: command + s) to save the script (locally in your browsing session).

  10. Click on the Deactivate breakpoints icon, from the JavaScript Debugger pane and then click on the Add Number 1 and Number 2 button to recalculate.

Congratulations! You now know how to troubleshoot JavaScript using Google Chrome’s Developer Tools!

Leave a Reply