How to use the JS debugger keyword to debug your code

In this post, I am going to walk through the basics of how to use the debugger keyword in JavaScript(in Chrome). I will provide an example to visualize what is happening.

The JavaScript debugger keyword is a tool that you can put in any script you make to debug it. We are going to take a look at the Watchlist and breakpoints; These are the 2 common tools you will use inside the debugger to help you find problems.

Here is the example we are going to be working with:

The debugger keyword is on line 13 in red. The syntax is simple. Just use debugger;

The code above is a simple page that we will use to help demonstrate the debugger. When the page is loaded, it has a body with a paragraph inside that says “This is in the body.” And we have a function that will run when we click on those words, in turn, allowing us to “hit” the debugger and start playing with the code to observe what is happening. Here is what the page looks like when we start it:

Let's say we have an error in our code but don't know where it is exactly it is or what is happening. This is where debugger comes into play. You can interact with the debugger by using the developer tools in Chrome. You can open it by cmd + click and select inspect on the page. Now we have this open we have to “hit” that function where we placed the debugger. We can do that by clicking on “this is in the body”. Now you should see this screen:

The Green line tells us what line JavaScript is currently on. It has ran everything above that line aswell.

Great! So when we click the words, it activates the function, JavaScripts sees that there is a debugger;, and stops running the page so we can test the code at that moment in time. Do you see that yellow box at the top? That is what we use to tell JavaScript when to run the next line or continue the code. This button tells java to continue running the script as intended.

This tells JavaScript to go to and run the next line.

When using the debugger, we can also operate breakpoints. These are points you can put in the code that makes JavaScript pause, to allow us to observe what it’s doing in that moment. To add one or more in the code, just click on the number that represents that line of code. Here is a picture of what that looks like:

When you click on the ‘29’ on line 29 it will place a blue marker on that line shown above

First, when we run our code, it will stop at the debugger. Then, when we click the continue button, it will run until it “hits” the breakpoint and pause. On the right hand side, there is a drop down menu called “Breakpoints.” In the menu, we can see all of our breakpoints we have placed.

Another useful thing you can utilize is the Watchlist(Watch) menu on the right side. In here, it will show all the variables that have been defined in order. But first, we have to add them. We can do that by clicking on the + sign and adding it like so:

When you click the + you can type the name of the variable and hit enter. It will auto fill the value for you.

Then we can use the step button and walkthrough the code and watch the variables change based on what line we are on.

The JavaScript debugger keyword is a very useful tool that can fix lots of problem and help you better understand how JavaScript handles your code.

Other browsers have slightly different developer tool interfaces but you can still use the debugger keyword just a bit diffrent.