• Choose a category
• All
• Classic-Fiction

Figure 3-11: Debug mode pauses the program while it’s running.

Debugging your code

When the debugger is up and running, the process is pretty simple.

1. Load the code.

Load the offending code into your browser. If the browser freezes every time you try to load the code, add the debugger directive to your code to load it directly into debug mode.

2. Add breakpoints as necessary.

Even if you turn on the debugger directive, you may want to set breakpoints to ensure the program stops where you want it to stop. Click the margin of the Script tab’s main browser window to set or remove breakpoints.

3. Refresh the page.

After you set the breakpoints, refresh the page to run the page in the browser and stop at your first breakpoint.

4. Look over your variables.

Normally, if your program has a logic error, it’s because some variable doesn’t have the value you think it does. Look carefully at the value of each variable (especially those used to control loops) and see whether it has the value you expect at this point. It may help to copy your condition from the code into the New Watch Expression box so you can tell whether a condition is currently true or false.

5. Step to the next instruction.

When you’re sure the code is performing the way you expect, use the Step Over button to move to the next instruction.

6. Repeat until you find the problem.

Look at the new state of the variables. Have things changed? Are there any surprises?

Normally, the process of going through your code slowly with the ability to check the state of your variables at every turn will help you find your mistakes. Learning how to use your debugger will save you hours of time.

Sometimes, you’re still stuck in an endless loop. The debugger helps you find problems, but it doesn’t fix them. When you recognize you’re still in an endless loop, you must regain control so you can go back to the editor and fix the problem. If you’re in debug mode, you might simply redirect your browser to another page (use the home button, for example). However, endless loops are notorious; therefore, you may need a more drastic measure. Use your operating system’s task management tool to kill the offending browser window and then reload the browser.

Controlling the flow

Several mechanisms step through a program in debug mode. Most of the time they work the same, but some subtle differences exist in their behavior. Here’s how stepping through a program works:

The Play button (green triangle) runs the program at full speed until the program encounters the next breakpoint. This is useful when you want to stop at one point to check your variables, quickly jump through a lot of code, and stop again after all that code has executed.

The Step Into button goes to the next line of code. If that code is a function, the debugger jumps into that function and examines the code inside that function. Generally, this is useful when you want to examine how data flows into functions. (See Chapter 4 of this minibook for more information about functions.)

The Step Over button goes to the next line of code. If that code is a function, the program executes the entire function as one line and doesn’t go into the details of the function. Normally, this is the behavior you want. If you’re concerned about the code inside the function, you should add another breakpoint there to stop the code execution at that point.

The Step Out button completes the current function at normal speed and stops at the next line of code outside the current function. This is normally used when you accidentally step into a function you don’t need to examine; so you can go back to the main code without having to step through hundreds of lines of irrelevant code.

Chapter 4: Functions, Arrays, and Objects

In This Chapter

Passing parameters into functions

Returning values from functions

Functions and variable scope

Producing basic arrays

Retrieving data from arrays

Building a multidimensional array

Creating objects

Building object constructors