• Choose a category
• All
• Classic-Fiction

2. Click the left margin to set a breakpoint.

Click the left margin of the script window to establish a breakpoint. When you reload the page, code control will pause when the browser gets to this point.

3. Refresh the page.

Use the browser’s refresh button or the F5 key to reload your page. This time the program should stop when it gets to the breakpoint.

Adding a debugger directive

This approach works fine for most programs, but sometimes Firebug runs into a problem because the browser (and thus the debugger) doesn’t get control of a program until it finishes loading. Sometimes an endless loop prevents the program from ever loading, so the debugger never gets control. If you run into this sort of situation, there’s another way to set the breakpoint. You can also place a breakpoint directly in your code. Here’s how:

1. Load your script into your editor.

2. Find the spot where you want to pause.

Typically, this is right before the code you expect is the problem. If you think the problem is an endless loop, move your cursor to the first line of that loop.

3. Add the keyword debugger; to your code.

This special line is a signal to Firebug that it should invoke debug mode at this point.

4. Load the page into Firefox.

Even if the page has an endless loop, the debugger directive will cause Firebug to pause so you can see what’s going on in the code.

5. Remove the debugger; line when you finish.

The debugger directive is used only for debugging. Obviously, you don’t want the page to enter debug mode on the user’s machine. After you fix the problem, remove this line from your source code.

If you forget to remove the debugger directive, most browsers will register a JavaScript error. This directive only makes sense if Firebug is installed, and users should never need a debugger. (That’s your job.)

Examining debug mode

Firebug, when in debug mode, has a few new features you may not have seen before. Figure 3-11 shows debuggerDirective.html in Firefox with the Firebug plugin activated.

A number of important new items occur on the page:

♦ The main browser panel may not show anything.

By definition, the program is not finished, so there may not be anything on the page yet. That’s not a problem. We’re really looking under the hood here, so we don’t expect anything yet.

♦ The current line of code is highlighted.

In the script window, one line is highlighted: the line of code that is about to be executed. The program is paused, allowing you to look over the current state of the program before you proceed.

♦ You can mouse over any variable to see its current value.

If you hover the mouse on a variable in the script, you can see its value. In Figure 3-11 none of the variables have been created yet, so they do not have meaningful values.

♦ The Watch tab window shows you the value of all variables.

You use this window to see what is happening to your variables. Note that JavaScript has access to tons of variables in the Web page we haven’t discussed yet. For now, just focus on the variables under “scopechain.”

♦ You can add another variable or expression to watch for.

If you want to keep an eye on a variable, you can type it into the New Watch Expression textbox at the top of the Watch tab window. It’s sometimes helpful to enter the condition for your while loop into this textbox. That way you can tell if the condition is currently true or false.

The Stack tab window shows the complete logic path that your program has taken so far. This is helpful information when your code becomes more complex, but it isn’t useful yet. The Breakpoints tab window allows you to add or remove additional breakpoints.

♦ The “remote control” toolbar lets you control the program execution.

This panel has three ways to step to the next instruction. For now, the Step Over button (or the F10 key) is the one you’ll use most often. (See the sidebar “Controlling the flow” for information