How to debug Javascript in Chrome quick and easy
Tags: javascript
Published: 2019-09-05 13:48:29

---
title: How to debug Javascript in Chrome quick and easy
published: true
description: In this article, you will learn how to debug Javascript in Chrome
tags: Javascript
---

Overview

----------

Original article - [How to debug Javascript in Chrome](https://indeema.com/blog/how-to-debug-javascript-in-chrome-quick-and-easy)

In this article, you will learn how to debug JavaScript code on front end and back end using Chrome DevTools and VS Code.

Goals

-------

1.  Learn to debug frontend and Angular
2.  Analyze how to debug Node.js

Front-end JavaScript/Angular debugging
--------------------------------------

Currently, a lot of tools like Chrome DevTools (also known as chrome debugger) and Firefox Developer Tools support front-end debugging. While these two are the most popular ones, other browsers also have tools of their own. Let's consider Chrome DevTools for our bug-eliminating adventure.

### Debugging JavaScript

Let's be honest, debugging can sometimes be really time-consuming. Especially, if simple commands such as **console.log()** or **window.alert()**.

You have to write and then remove additional code and, sometimes, you can even commit code that includes these methods (even if you thought you had removed them). But if there are any linters set up, console or alert methods will be highlighted in the code.

Here's when Chrome DevTools comes to the stage with a noble mission to debug code without these tedious instruments. Among its other perks, CSS and [HTML](https://indeema.com/blog/hints-to-make-your-html-markup-easy) editing, testing the network and site speed are our favorite ones.

Let's create a simple web page with JavaScript method **getData()** that simply collects the data from the **name** input field, creates a DOM node with **dataSpan ID**, and then adds the input field value to that **DOM** element.

Here's how our page'll look like:

**In HTML:**

![HTML page](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/1.jpg)

**In JavaScript:**

![JavaScript Debugging code](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/2.jpg)

Let's save it under **app.js** name.

That's how the page will appear in browser:\
![app.js page in browser](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/3.jpg)

To look over how the method works prior to storing it in **dataSpan**, we can use the old-fashioned **console.log(data)** or **window.alert(data)**. Here's what we'll see when launching the file in VS Code:

![VS code](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/22.jpg)

That is, however, the most primitive approach.

So, instead, we'll use **Chrome DevTools** and validate that everything works as we plan using breakpoints.

**Breakpoint** is simply a line of code at which we want to stop running code to examine how it works (or doesn't work) accurately.

Back on track, let's launch the page in Google Chrome and:

1.  To open Chrome Develop Tools, in the upper-right corner of the browser, click to open **Customize and control Google Chrome** menu.
2.  From the menu, select **More tools**, and then select **Developer tools**.

Alternatively, we can use **Ctrl+Shift+I** keyboard shortcut (we prefer this approach, but that's up to you).

![Developers tools opening](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/4.jpg)

After we're in, let's pause the code at a breakpoint:

1.  With **Chrome DevTools** launched, select the **Sources** tab.
2.  From the **Sources** pane, in the **Page** view, select **app.js** (the JavaScript file we created previously).
3.  In the **Editor Pane**, to the left of the let data **=document.getElementById('name').value;** line of code, click the line number **3**.

With this in place, we'll set a **line-of-code breakpoint**, which is nicely highlighted in blue so we can see exactly where we've set it. Also note that the selected variable's name automatically adds up to the **Breakpoints > Local** section, in the **JavaScript Debugging** pane.

### Managing Increments at Which the Function Is Executed

Setting a breakpoint means that the function will stop execution on that breakpoint. We must then enable executing the code line-by-line to inspect the changes in our variable.

At the top-left of the **JavaScript Debugging** pane are the basic breakpoint run commands:

![basic breakpoint run commands](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/6.jpg)

The first, **Resume script execution** button will continue the code execution until the code ends or until the next breakpoint.

Let's enter **hello world** in our name field. The line will expand with data **= "hello world"**. Now let's click **Step over** **next function call** button.

![Step over next funtion call](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/7.jpg)

The selected breakpoint line is executed and the debugger will select the next one. Expand the **Scope** pane to see the value of the **data** variable. It has changed to "**hello world**", which we have previously entered. It simply displays our variable on a specific line of code. Click **Step over** **next function call** again to run the selected method and proceed to the next line.

If you refresh the page, the value of the **out** variable will be updated to the DOM element. To the left of the variable, you can click the **Expand** () icon to view its value. If you click **Step over** **next function call**, in the browser, the "hello world" text will be added to the **dataSpan** again.

### More Complex Javascript Debugging

Let's say we want to execute more complicated function that definitely requires some debugging. For example, we want users to enter space-separated numbers. The function will then evaluate and output these numbers, their sum, and multiplication result (product).

![JavaScript debugging](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/8.jpg)

For this purpose, we'll modify our app.js to look like the screenshot above. Let's refresh the page and do some debugging:

![debugging JS](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/9.jpg)

1.  Click **3**, the line number of let data = document.getElementById('name').value;, to set a breakpoint.
2.  In the browser, enter **23 24 e** in the input field. Here we intentionally add both numbers and a letter to cause an error---these can't be added or multiplied.
3.  Click **Step over** **next function call**.

On the screenshot, we can see that both sum and product have a NaN (not a number) value. This indicates that we have to fix our code right away.

### Another Way to Set Breakpoints

In the majority of cases, your code is a lot longer and, perhaps, concatenated into a single line. For example, let's assume we have 1000 lines of code. In this case, setting breakpoints by clicking the line numbers every time looks pretty unrealistic, isn't it?

For this purpose, DevTools features excellent tool for setting breakpoints on events that occur when interacting with browser. On the **JavaScript Debugging** pane, click **Event Listener Breakpoints** to expand it with event categories.

![JavaScript debugging](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/11.jpg)

As you can see, we've set a breakpoint on **Mouse > click** event anywhere in our code. So, without the need to manually add a breakpoint, when you click the **Get Input Data** button, the execution will be paused on this **onclick** event.

![onclick event](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/12.jpg)

Clicking **Step over** **next function call** will sequentially lead us through the code used to process the click action.

Via **Event Listener Breakpoints**, you can set breakpoints at a variety of event types such as Keyboard, Touch, and XHR.

### The "debugger" Keyword

When you type the **debugger** keyword anywhere in your code, Chrome DevTools will pause executing at that line and highlight it similarly to breakpoints. You can use this instrument to debug JavaScript in Chrome or other browsers. Just remember to remove the word from the code when you're done.

![debugger keyword](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/13.jpg)

The code in the screenshot above will be paused on the line that contains the debugger word and will launch Chrome DevTools. That is equivalent to setting a breakpoint on that specific line of code. You can also manage the code execution using **Step into next function call** and **Step over next function call** buttons as we did before.

### To Sum It Up

At the beginning, we considered **console.log()** and **window.alert()** and found them not really useful. We were supposed to use them a lot throughout the code, which could make the code heavier and slower if we forgot to remove these commands when commiting.

As the code grows, Chrome Developer Tools can be much more efficient to catch any bugs and evaluate the performance in general.

### How to debug Angular

The easiest way to debug Angular code via Visual Studio Code (VS Code). To start debugging, you will need to install the [Debugger](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension to your Chrome browser:

1.  Launch VS Code with your current project, open the **Extensions** tab. Or press **Ctrl+Shift+X** on your keyboard.
2.  Enter **Chrome** in the search field.
3.  From the search results, select **Debugger for Chrome** and click **Install**.
4.  After you install the extension, the **Reload** button will appear. Click it to complete the installation and activate the Debugger in the browser.

### Setting Breakpoints

Exactly as we did before, in the **app.component.ts**, click the line number to the left of the line. The set breakpoint will be denoted with a red circle icon.

![Debugging Angular](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/14.jpg)

### Debugger Configuration

First, we'll need to configure the debugger:

1.  From the **File Explorer**, navigate to the **Debug** view. You can also use Ctrl+Shift+D shortcut.
2.  Click **Settings** icon button to create **launch.json**. That's the configuration file we'll use.
3.  From the **Select Environment** drop-down, select **Chrome**. This will create a new .**vscode** folder with **launch.json** file in your project.
4.  Launch the file.
5.  To fit the file for our purpose, in the **url** method, change the localhost port from 8080 to 4200.
6.  Save changes. Your file will look as follows:\
    ![Debugger Configuration](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/15.jpg)
7.  Press **F5** on the keyboard or click **Start Debugging** button to launch the Debugger.
8.  Launch Chrome.
9.  Refresh the page to pause the code at the set breakpoint.

![Debugger Configuration](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/16.jpg)

You can sequentially browse through the code using F10 button inspecting the variables and their change.

![variable change in JS debugging](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/17.jpg)

### README

The Debugger for Chrome extension contains lots of info about additional configurations, working with sourcemaps, and resoling various issues. You can view them directly in VS Code by clicking the extension and selecting **Details** tab.

![Debugger for Chrome](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/18.jpg)

How to debug Back End (Node.js)
-------------------------------

Here you'll find out how to debug Node.js code. Here are the most common approaches:

-   Using Chrome DevTools (well, that's by far our favorite).
-   Using IDEs such as Visual Studio Code, Visual Studio, WebStorm, etc.

We'll use VS Code and Chrome DevTools for illustration.

Chrome and Node.js use the same JavaScript engine, Google V8, which means we can use the tools we used for front end debugging.

To do this:

1.  Launch your project in VS Code.
2.  Navigate to **Console** tab.
3.  Enter or paste **npm start --inspect** command and press **Enter**.
4.  Ignore the suggested "chrome-devtools://..." URL (there is a better way).\
    ![VS Code launching](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/19.jpg)
5.  Launch Chrome and enter or paste "**about:inspect**". This will redirect you to the **Devices** page of DevTools.
6.  Click **Open dedicated DevTools for Node** hyperlink.

![DevTools for Node](https://indeema.com/images/articles/How-to-debug-javascript-in-Chrome-quick-and-easy/20.jpg)

The node.js debugging process is done the same way we did on front-end side using breakpoints. This is pretty useful that you don't need to switch to IDE. This way, both back end and front end can be debugged using the same interface.

Thanks for reading and hope you enjoyed this article. Subscribe to our updates, we have lots more cool stuff up in our sleeve :)