HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [150]
♦ A mechanism for moving through the code a line at a time. You can normally step through code one line at a time so that you can see what’s going on.
♦ A way to view the values of all variables and expressions. Knowing what’s happening in your variables is important. (For example, is a particular variable changing when you think it should?) A debugger should let you look at the values of all its variables.
♦ The ability to stop runaway processes. When you create loops, you’ll accidentally create endless loops. (For more on endless loops, see the earlier section “Managing the obsessive loop.”) In a typical browser, the only way out of an endless loop is to kill the browser with the task manager (or process manager in some operating systems). That step is a bit drastic. A debugger can let you stop a runaway loop without accessing the task manager.
Debuggers are extremely handy, and they’re very common in most programming languages. JavaScript programmers, however, haven’t had much access to debugging tools in the past because the technical considerations of an embedded language made this difficult.
Fortunately, Firebug has a wonderful debug mode that works very well and provides all those features. To test it, I wrote a program with a deliberate error that would be hard to find without a debugger:
//
//from debug.html
//has a deliberate error
var i = 0;
var j = 0;
while (i <= 10){
console.log(i);
j++;
} // end while
//]]>
This code is another version of the endless.html program from the “Managing the obsessive loop” section earlier in this chapter. You may see the problem right away. If not, you’ll see it when you run the debugger, which I describe how to do in the next sections.
Aptana also has an interactive debugger, but it’s now integrated into the Firebug debugging tool. I focus on the Firebug version, because it’s easier.
Interactive debugging is usually used when the program is running but not doing what you want. In this case, run the program but stop it so you can inspect the behavior of the code in a sort of “super slo-mo.” Essentially, you can pause the program at a suspected trouble spot and look carefully at all the variables while the program is paused. You can then advance one line at a time and check the status of your program at each line of execution. It’s a very powerful mechanism.
Setting up the Firebug debugger
The FireBug extension has a very powerful and easy-to-use integrated debugger. To make it work, follow these steps:
1. Make sure Firebug is visible.
Use the F12 or Firebug button to make the Firebug console visible.
2. Turn on script viewing.
Interactive debugging can slow the browser significantly, so it is turned off by default. Enable the drop-down list on Firebug’s script tab to turn script management on.
3. Load the page into the browser.
It’s sometimes better to configure Firebug before you load the offending page because some types of bugs cause the browser to hang. If you set things up first and then load the page, you’re less likely to run into this sort of problem. (See the upcoming section “Adding a debugger directive” if this is still a problem.)
Setting a breakpoint
A JavaScript program can get much longer than the short examples I show in this book. You usually won’t want to start the line-by-line debugging from the beginning, so you need to specify a breakpoint. When you run a program in debug mode, the program runs at normal speed until it reaches a breakpoint and then it pauses so that you can control it more immediately.
To set a breakpoint:
1. Look at the code in Firebug’s script window.
If you followed the steps in the previous list to set up the Firebug debugger, you should already see the script in this window. Find a place in the code preceding where you expect trouble.