A detailed guide to debugging JavaScript code in Chrome Devtools. Major browsers "Debug tools"

Forget about debugging with console.log forever! Learn how to use breakpoints to debug code in tools Chrome developer

Translation of the articleBrandon Morelli : Learn How To Debug JavaScript with Chrome DevTools . Published with permission of the author.

Finding and fixing errors can be difficult. You may be tempted to use console.log() uncontrollably to get your code to work correctly. It's finished!

This article is about the correct way to debug! You'll learn how to use Chrome Developer Tools to set breakpoints and examine code. This approach is often the most effective way to find and fix errors in your code.

This tutorial shows how to debug one specific issue, but a similar workflow is useful for debugging all types of JavaScript errors.

Step 1: Reproducing the error

Reproducing the error—the first step to debugging—means discovering the series of actions that lead to its appearance. You may have to reproduce the bug many times, so it is advisable to eliminate any unnecessary steps.

To reproduce the bug we are going to fix during this manual, follow the instructions below:

Here is the web page we will be working with for this article. Open it in a new tab: DEMO.
In the demo for Number 1, enter 5.
Enter 1 for Number 2.
Click Add Number 1 and Number 2.
Look at the label below the inputs and button. She says that 5 + 1 = 51.

Oops. This is an incorrect result. The result should be 6. This is the error we are going to fix.

Step 2: Pause code execution using a breakpoint

DevTools allows you to pause your code mid-execution and retrieve the values everyone variables at this point in time. The tool for pausing code is called a breakpoint. Try it now:

Return to the demo and open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
Go to the Sources tab.
Click Event Listener Breakpoints to expand the menu. DevTools reveals a list of event categories such as Animation and Clipboard.
Expand the Mouse event category.
Select click.

Back in the demo, click Add Number 1 and Number 2 again. DevTools will pause and highlight the line of code in the Sources panel:

function onClick() (

When you hit click you set a breakpoint based on all click events. When the click occurs any node and this node has a handler click events, DevTools automatically stops execution on the first line of click handler code for this node.

Step 3: Explore the Code

One common cause of errors is that the script is executed in the wrong order. By examining the code, you can execute the code one line at a time and find out exactly where it is executed in an unexpected order. Try it now:

In the Sources panel in DevTools, click Step into next function call .

Step into next function call button

This button allows you to execute the onClick() function one line at a time. DevTools will stop execution and highlight the following line of code:

If (inputsAreEmpty()) (

Now click the Step over next function call button.

Step over next function call button

This tells DevTools to execute the inputAreEmpty() function without going into it. Please note that DevTools skips several lines of code. This occurs because inputAreEmpty() evaluates to false , so the if statement block of code is not executed.

This is the basic idea behind code exploration. If you look at the get-started.js code, you'll see that the error is probably somewhere in the updateLabel() function. Instead of examining every line of code, you can use a different type of breakpoint to pause the code closer to where the error occurs.

Step 4: Set another breakpoint

The most common breakpoints set on lines of code are when you have a specific line of code that you want to pause. Try it now:

Look at last line code in updateLabel() :

label.textContent = addend1 + "+" + addend2 + "=" + sum;

To the left of the code you can see the number of this specific line: 32. Click on it. DevTools will place a blue icon on top of the number. This means there is a breakpoint on this line. DevTools will now always pause before it.

Click the Resume script execution button:

Resume script execution button

The script will run until it hits a breakpoint.

Look at the lines of code already executed in updateLabel() . DevTools outputs the values of addend1, addend2 and sum.

The sum value looks suspicious. It looks like it is being treated as a string when it should be a number. This may be the reason for our error.

Step 5: Checking the Variable Values

Another common cause of errors is when a variable or function generates values other than expected. To see how values change over time, many developers use console.log() , but console.log() can be tedious and ineffective for two reasons. Firstly, you may need to manually edit the code with big amount console.log() calls. Second, you may not know exactly which variable is associated with the error, so you may need to log many variables.

Watch Expressions is a DevTools alternative to console.log() . Use Watch Expressions to track the value of variables over time. As the name suggests, Watch Expressions is not limited to just variables. You can save any valid JavaScript expression in Watch Expression. Try it now:

In the Sources DevTools panel, click Watch. The section will open.
Click Add Expression.

Add Expression button

Enter typeof sum .
Press Enter. DevTools will show: typeof sum: "string" . The value to the right of the colon is the result of your Watch Expression.

As expected, sum is treated as a string when it should be a number. This is the reason for our error in the demo.

We tell you how to use Chrome panel Devtools is convenient for debugging.

Finding and fixing errors can be difficult for beginners. If you are thinking about using console.log() to debug your code The best decision, then you are wrong.

In this article we will talk about great tools Google Chrome Devtools for debugging This process is much more effective way solutions to this problem.

This is just one simple example of how to use debugging, but it can be applied to any problem.

Step 1: Reproduce the bug

Reproducing bugs is always the first step towards debugging. This means finding the sequence of actions that lead to the error. The process can be long, so try to optimize it.

To follow the steps in this tutorial yourself, do the following:

Here is the web page we will be working with in this tutorial. Don't forget to open it in a new tab;
Enter the number 5 in the “Number 1” field;
Enter the number 1 in the “Number 2” field;
Click on the “Add” button;
Look, they tell you that 5+1=51;

Oops, that's obviously wrong. The result should be the number 6, and this error needs to be corrected.

Step 2: Pause execution using a breakpoint

DevTools allow you to stop code execution in progress and view the values of all variables at that point in time. The tool for pausing code is called a breakpoint. Try:

Return to our test page and enable DevTools by pressing Cmd + Option + I (Mac) or Ctrl + Shift + I (Windows, Linux);
Go to the "Sources" tab;
Expand "Event Listener". DevTools will expand a list of event categories such as animation and clipboard;
Check the “click” box;

Returning to the page, add “Number 1” and “Number 2” again. DevTools will pause the demo and highlight the line of code in the Sources panel. DevTools will highlight this line of code:
function onClick() (

function onClick() (

Why is this happening?
When you select "click", you set breakpoints that depend on click events on each element that has a handler for it.
Step 3: Perform step-by-step debugging
One common reason why errors occur is that the script is not executed in the order you think it should. You can avoid this problem by observing the execution of the code line by line. Let's try:
- In the "Sources" panel, click "Step into next function call button"
This button will allow you to sequentially track the execution of the onClick function. Stop the process when DevTools highlights the following line of code:

if (inputsAreEmpty()) (

if (inputsAreEmpty()) (
- Now click the “Step over next function call button”;
DevTools now knows to execute inputAreEmpty() without debugging its contents. Please note that DevTools skips several lines of code. This is because inputAreEmpty() returns false, so the if block was not executed.

That's the point step-by-step debugging code. If you look at the code in get-started.js, you'll see that the error is probably somewhere in the updateLabel() function. Instead of going through each line of code, you can use a different type of breakpoint to stop the process closer to where the error occurs.
Step 4: Select a different breakpoint
The line-of-code type is the most popular breakpoint. If you know where the error might be, use this type:
- Look at the last line of code in updateLabel(), which looks like this:
  label.textContent = addend1 + " + " + addend2 + " = " + sum;
  
  label. textContent = addend1 + " + " + addend2 + " = " + sum ;
- To the left of this code you will see a line number: 32. Click 32. Now DevTools will always pause until this line of code is executed;
- Click the "Resume script execution button". The script will continue to run until next line code with a breakpoint;
- Look at the lines of code in updateLabel() that have already been executed. DevTools outputs the values of addend1, addend2 and sum.