Using the Debugger

This lesson is part of the Web Programming 1 Course.

Note that in the video, I am using Chrome as my browser. You could use another browser and still be able to follow along, but ideally you should be using Chrome.

No matter how experienced you are as a programmer, your code will have bugs (errors) in it. A debugger is a tool that you can use to help you find bugs, and every programmer should know how to use it.

It may be too soon for you to learn all the ins and outs of the debugger, but I want to show it to you know because it not only helps you find bugs, it can also be a great tool to help you understand how code is executed when you run your program.

We have been running our JavaScript code by loading a web page in the browser. The browser's Web Developer Tools has a debugger built into it, which I show you in the video.

Some of the other details that I mention in the video are:

  1. Setting a break point
  2. Stepping over a line of code
  3. Stepping into a function call

Setting a break point

A break point is the place in your programs code where you would like it to break from it's normal execution so that you can 'step' through the code line by line.

There are different ways to set break points in your code, but in the video we used a 'debugger' statement, like so:

debugger;

Once you have set a break point, you can then run your code in the browser, but you need to make sure that the Web Developer Tools are open (otherwise the break point will not work). So, after you open the Web Developer Tools, you can refresh the page to re-run your program in the browser. And then your program will stop it's execution at your break point, and the debugger will appear in the 'Sources' tab of the Web Developer Tools.

Stepping over a line of code

You can press the 'Step Over' button to execute a line of code. This button is in the upper right corner of the debugger and it looks like a rounded arrow going over a dot.

Stepping into a function call

If the debugger is frozen on a line of code that is calling a function, you can press the 'Step Into' button to observe the code that runs inside the body of the function. If you press 'Step Over' instead of 'Step Into', then the browser will (very quickly) execute all of the lines of code in the function body, and the debugger will move to the next line down.

If you want to stop stepping through your code, you can press the 'Resume' button (which looks like a 'Play' button). Then your program will continue its normal execution.