---
title: "How to Troubleshoot JavaScript Using Google Chrome Developer Tools"
description: "In This Tutorial: Access Dev Tools Troubleshoot JavaScript The Google Chrome web browser includes a variety of Developer Tools that can help you while maintaining various components of your website...."
url: https://www.inmotionhosting.com/support/website/google-tools/how-to-troubleshoot-javascript-using-google-chrome-developer-tools/
date: 2018-04-27
modified: 2019-08-30
author: "InMotion Hosting Contributor"
categories: ["Google Tools"]
type: post
lang: en
---

# How to Troubleshoot JavaScript Using Google Chrome Developer Tools

## In This Tutorial:

[Access Dev Tools](#access-dev-tools) [Troubleshoot JavaScript](#troubleshoot-js)

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 browser 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.

**NOTE:** Any of the steps above will open the **Developer Tools pane**. To follow along with the example, it may be easier to open *Dev Tools* as a separate window. To do this simply click on the three (3) dot menu icon inside of the Dev Tools pane, then click to select the first icon in the **Dock side** setting to “*Undock into separate window*“. If you are using Windows/Linux, you can also press **Ctrl** + **Shift** + **d** to toggle between views.

In a separate, maximized window the **File Navigator pane** appears in the first column (from the left), the **Code Editor pane** is displayed in the middle column, and the **JavaScript pane** appears in the third column (from the left). If the *Dev Tools pane* width does not allow for all three columns, then the **JavaScript pane** will be displayed below the **File Navigator** and **Code Editor panes** The **Console pane** appears below the other panes, regardless of the view choosen. If the **Console pane** is not displayed, simply press the **Esc** key and it should appear. See figure(s) below:

| Full Width | Partial Width |
| --- | --- |
| [![Google Chrome Developer Tools pane opened in full width and panes labeled.](https://www.inmotionhosting.com/support/wp-content/uploads/2018/04/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled-1024x966.png)](/support/wp-content/uploads/2018/04/website_website-troubleshooting_google-chrome-developer-tools-pane-full-width-labeled.png) | [![Google Chrome Developer Tools pane opened as partial width and panes labeled.](https://www.inmotionhosting.com/support/wp-content/uploads/2018/04/website_website-troubleshooting_google-chrome-developer-tools-pane-partial-width-labeled.png)](/support/wp-content/uploads/2018/04/website_website-troubleshooting_google-chrome-developer-tools-pane-partial-width-labeled.png) |

## 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](https://googlechrome.github.io/devtools-samples/debug-js/get-started) in your Google Chrome Browser.
2. [Open the **Developer Tools pane**](#access-dev-tools).
3. Click on the **Sources** tab. **NOTICE:** The *File Navigator pane* opens. Here, the *Network tab* displays the files and scripts used to load the (currently displayed) website. The *Code Editor pane* will display the code for the script(s) and allow you to make modifications to preview live results (without affecting your user’s experience with your website). The **JavaScript Debugging pane** is where you will find more advanced tools to help you *debug your website’s script(s)*.
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**. **NOTE:** For the example, click on **line 32** of the *get-started.js* file.
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. **NOTICE:** For the example, enter the values **5** and **1**. Also, the script pauses at the line of code selected (line 32) in the previous step.
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. **NOTICE:** The variables *addend1* and *addend2* are correct, however, the *sum* variable is appending *addend2* to *addend1* rather than adding the values together.
8. Now, enter the following line of code into the **Console**: parseInt(addend1) + parseInt(addend2) Then, hit the **Enter** (for MacOS: **return**) key. **NOTICE:** The value of the expression is the result of properly adding the integer values, rather than appending the string values.
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. **NOTICE:** The values should be added accordingly and results should be correctly displayed. **IMPORTANT:** The changes saved are NOT uploaded to the server. Therefore, you must make changes to the actual file(s) on your server to correct the JavaScript for your visitors.

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