InMotion Hosting Support Center

In This Tutorial:

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!

Was this article helpful?

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Support Center Login

Our Login page has moved. Please click the button below to be redirected to the login page.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

0 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!