More Debugger Uses

This section is about using the FireFox debugger window with the debugger statement as the way to set breakpoints. The debugger window has a built in method of setting breakpoints, however at this time it seems to be very buggy so weíre not using it.

First, letís consider showing values of variables. You can just hover over them, but that gets old fast. If you notice in the value bubble that appears when you hover over a variable, there is a Watch option.

 

If you click on that, it adds the variable to the Watch Window which is on the right side of the debugger.

Setting watches is very useful since typically youíre only interested in a few variables at one time. For less used variables you can always just hover over it to get the value. You can also manually add watch expressions which can be statements in their own right. To do that,† right click on the watch window and select Add Watch Expression

These can be any JavaScript expression.

Once youíve entered a watch you can edit it by double clicking on it and changing the expression.

Thereís another somewhat sneakier thing you can do with watches, you can directly change the value of a variable by clicking on the value and editing it. Here I changed count from 0 to minus 2. Notice that the other watch expression now has the value false since -2 isnít greater than -1.

This can sometimes be very handy if youíre debugging some code and perhaps missed a critical value inside a loop. Just change the value and let it run again.

The last thing Iím going to discuss is putting the debugger statement into an if block. Very often in code, youíll do something many many times in various loops and other constructs, but youíre only interested in what happens in a few cases. Just leaving a naked debugger statement in the block can make for very tedious debugging, but since debugger is a JavaScript statement, you can use an if with it.

At line 10 I added an if statement such that the debugger statement is only executed when count == 1. Notice the double equals signs, thatís used for comparisons whereas the single equals sign assigns a value to a variable.

NOTE: Single equals signs in If statements are VERY DANGEROUS. You may see this is existing code and there are a few times it makes sense, but far more often itís a bug waiting to happen. If I had used a single equals sign in this code, as shown below, the code would have gone into an infinite loop.

What would happen with this code with the single = on line 10 rather than the correct == or ===, is that on each loop, the if on line 10 would be executed. The count = 1 test in the if would be evaluated which, instead of testing if count equaled one, would assign the value 1 to the variable count. Apart from the program not actually counting down, the while loop starting at line 5 would never stop because count would always equal one, and one is greater than zero.

Most languages will warn you if you use an assignment (a single =) in an if. Unfortunately JavaScript doesnít, so be careful.

Back to First Page