Blake O'Hare .com

JavaScript Tutorial, Part 3 - Using the Magical Debugger

If something breaks and you don't immediately know what's wrong with your code, then you have to use the debugger. The debugger is your magical friend. Like Jimminey Cricket.

First, let's write some buggy code. Save this code in your code.js file.
var side_a = 10;
var side_b = 13;

var hypoteneuse = Math.pow(Math.pow(side_a, 2) + Math.pow(side_b, 2), 0.5);

window.alert(hypotenuse);


Note that hypotenuse is misspelled when it is declared and spelled correctly when it is used in window.alert.

The Debugger in Chrome

View index.html in Chrome. You'll notice the popup window won't appear. That's because we wrote broken code. Press F12. This will bring up the developer tools window. If you refresh the page, the debugger will point out exactly which line it encounters the error on.
js_tutorial_2.png
Note that this is the first line where the debugger thinks something has gone wrong. The real error is the typo on the line before it. Hypotenuse only has 2 e's.

The Console

If you press escape it brings up a mini-console where you can type in various expressions or variable names. For example, if you type "hypoteneuse", it'll show you the value of the variable hypoteneuse.
js_tutorial_3.png
You can pretty much type in any valid JavaScript expression and it will evaluate it for you. Very convenient for testing things out quickly or probing into problems.
js_tutorial_4.png

Breakpoints

Click on a line number. Like 4. 4 is a good number. You'll notice the line number becomes highlighted, like this:
js_tutorial_5.png
This line now has a "break point". If you re-run the code, the debugger will PAUSE the code right before it runs this line. Go ahead and try it by hitting F5 in the main browser window. You'll see something like this:
js_tutorial_6.png
That blue line means the browser is paused at this point of execution.
You can hold the mouse over any variable that is already declared and it will show you the current value of that variable in a bubble. Like side_a in this example. To continue the execution of your program, use the buttons over here:
js_tutorial_7.png
  • The first button will unpause your script.
  • The next button will run the current line and pause before it runs the next line
  • The next two have to do with function definitions which I haven't shown you yet. So don't worry about them for now.
  • The last button will remove the break point you set.

Entire books can be/have been written about debuggers so I won't claim to have even scratched the surface of what you can do with the JavaScript debugger. But it is a starting point.

Debugging in Internet Explorer

...is surprisingly impressive in this area. Internet Explorer (9 and up) has a nearly identical debugger/debugging experience.

Debugging in Firefox

Firefox's built-in developer tools are a bit watered-down, but you can download the Firebug extension and, again, get a similar experience.

Debugging in Opera or Safari

Hahahaha

Moral of the Story...

If your code is broken and it takes you more than 22 seconds to find the problem, you better be using the debugger. Otherwise you are needlessly wasting your time.