- Introduction
- The Right Tools: A Programmer's Editor
- Simple Debugging
- Using Break Points to Halt Code Execution
- Validating JavaScript
- A Final Note
- Further Reading
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Using Break Points to Halt Code Execution
As your scripts grow in complexity, you're likely to find that even console logging isn't enough to let you debug effectively.
To perform more detailed debugging, you can set so-called break points in the code at places of interest. When code execution arrives at a break point, it pauses; while time remains frozen, you can examine how your code is operating, check variable values, read logged messages, and so on.
Setting Break Points
To set a break point in most popular debuggers, you need to go to the Scripts panel, where you'll see your code listed. Click on a line number (or just to the left of it) to set a break point at that line. In Figure 5, a break point has been set on line 8 of the code. The execution has stopped at this point, and you can see the current values of the individual variables in the right-hand panel. You can remove Break Points by clicking again on the Break Point icon in the left-hand margin.
)
Figure 5 Setting a break point
Conditional Break Points
Sometimes it helps to break code execution only when a particular situation occurs. You can set a conditional break point by right-clicking he Break Point icon in the left-hand column and entering a conditional statement, as shown in Figure 6.
)
Figure 6 Setting a conditional break point
Your code will execute without interruption until the condition is fulfilled, at which point execution will halt. For instance, in Figure 6, the code will halt if the sum of a and b is less than 12. You can edit the expression at any time just by right-clicking once more on the Break Point icon.
When code execution halts at a break point, you can choose to continue code execution, or step through your code one statement at a time, by using one of the code execution buttons. These buttons usually look something like VCR controls, and appear at the top of one of the panels in the debugger (you can see how they look in Firefox/Firebug by looking at the center of the toolbar in Figure 6). In most debuggers, the options are:
- Continue: Resumes execution and only pause again if/when another breakpoint is reached.
- Step Over: Executes the current line, including any functions that are called, then moves to the next line.
- Step Into: Moves to the next line, as with Step Over, unless the line calls a function; in that case, jumps to the first line of the function.
- Step Out: Leaves the current function and returns to the place from which it was called.
Launching the Debugger from Your Code
It's also possible, and often useful, to set break points from within the JavaScript code. We can do this by using he keyword debugger:
function myFunc(a, b) {
if(isNaN(a) || isNaN(b)) {
debugger;
}
// .. rest of function code here ...
}
In this example, code execution will be halted, and the debugger will be opened, only if the conditional expression evaluates to true.
The debugging tools allow you to halt code execution in other circumstances too, such as when the DOM has been altered, or when an uncaught exception has been detected, but these are more advanced cases outside the scope of this article.
Watch Expressions
A watch expression is a valid JavaScript expression that the debugger continuously evaluates, making the value available for you to inspect. Any valid expression can be used, ranging from a simple variable name to a formula containing logical and arithmetic expressions or calls to other functions.
You can enter a new watch expression via the right-hand panel of the Script tab, as shown in Figure 7 (Firefox/Firebug).
)
Figure 7 Entering a watch expression