Breakpoint Debugging
Firebug's Script tab contains a powerful debugger that lets you pause JavaScript execution on any line. You can then step forward line-by-line to analyze how the state of the program changes in real time. Breakpoints need not be triggered indiscriminately; Firebug lets you specify the circumstances under which a breakpoint is triggered.
Setting Breakpoints
The simplest way to set a Firebug breakpoint is to find the desired script in the Script tab, then click on the number of the line at which execution should stop. The debugger pauses execution upon reaching that line and shows you the current call stack (Figure 2). The watch pane on the right lets you inspect the value of local variables. If the value is an object, you can click on the object to view its properties, just as you can in all other Firebug contexts. You can also enter arbitrary JavaScript expressions and trace their values as execution progresses.
While the debugger is stopped, the Firebug toolbar contains a horizontal view of every function in the call stack. Click a function to move to the file and line where its execution stopped and inspect the local variables in that context.
Conditional Breakpoints
Sometimes you'd rather not have the debugger stop every time a line is hit, but rather, only when certain conditions are true. Right-click a line number in Firebug's Script tab to open a little bubble where you can enter a JavaScript expression. The debugger pauses execution only when the expression evaluates to be true.
Error Breakpoints
One of the most common reasons to use the debugger is to investigate an error that you weren't expecting. When an error occurs in JavaScript, a detailed description of the error is logged to Firebug's Console. After reading the message, you might wish you could have been in the debugger when the error occurred so that you could inspect the objects and call stack when it occurred.
Error messages have a red button that you can toggle to set a special kind of breakpoint that stops whenever the exact error occurs again. Toggle this button on, then try to reproduce the error. Firebug switches you to the debugger when it happens.
Sometimes, Firebug can save you the trouble of having to reproduce the error. Error messages have an attached stack trace that you can see by expanding the description. The trace exposes not only the names of the functions on the stack, but also the values of each of the arguments that were passed to each function.
The debugger Keyword
When working in your editor, it's sometimes easier to locate the spot where you want to set a breakpoint than to switch to Firebug and find it separately. JavaScript has the built-in keyword debugger, which comes in handy. Put the debugger keyword on any line where you want the debugger to stop, and script execution pauses when that line is reached—just as if you'd set a breakpoint within Firebug.
