Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
This chapter is from the book

Debugging Your JavaScript

Dreamweaver includes a JavaScript debugger, which allows you to find problems in your JavaScript code. Even if you're just using the built-in behaviors, there are times when they don't do exactly what you expect, and the debugger can be a valuable tool to find the problem.

To use the JavaScript debugger:

  1. Open the page with the JavaScript you want to debug.

  2. Select File > Debug in Browser > Netscape (or Internet Explorer). A browser window will open, and a Java Security window will open as well.

  3. If you're debugging in Netscape Navigator, click on OK in the debugger warning box that appears, then click on Grant in the Java Security dialog box. If you're using Internet Explorer (Windows only, the debugger doesn't work on Internet Explorer for Macintosh), click on Yes in the Java Security dialog box, then on OK in the debugger warning box that appears. The debugger window will appear (Figure 13.46), and the browser will stop at the first line of JavaScript code.

    Figure 13.46Figure 13.46 The JavaScript debugger window.

  4. Click on a line in the code just before you think something is going wrong, and add a breakpoint by clicking the Set/Remove Breakpoint button or press F7.

  5. Click on the Run button . The code will start executing, and then stop at the point at which you set the breakpoint.

  6. Click the Step Into button (or press F10).

    This will step through one line of your code at a time. You can watch what happens in the browser window with each step (Figure 13.47).

    Figure 13.47Figure 13.47 You can watch your code step-by-step.

  7. Repeat Step 6 until you find your error or pass the problem area.

Sometimes simply stepping through your code is not enough to figure out what's wrong. You can also watch the values of variables (and even set them) in the debugger window as well.

To watch a variable's value:

  1. Follow Steps 1 through 4 above.

  2. Highlight the variable that you want to watch.

  3. Click on the + (plus) button in the bottom half of the debugger window. The variable will appear in the bottom half of the window.

  4. Press Enter (Return) or Without highlighting a variable, click on the Plus button and type the variable name. Then press Enter (Return).

  5. Click on the Run button. The variable's value will be updated in the bottom half of the debugger window (Figure 13.48).

    Figure 13.48Figure 13.48 The variable's value is updated in the bottom pane of the debugger window.

One of the most useful ways to test any code—including JavaScript—is to set variables to really absurd values. What happens to your life expectancy calculator, for example, when someone claims they were born in 1865? Or what happens when a user clicks on a button 100 times? One way to test these unlikely possibilities is to set the variables in your code directly. The Dreamweaver debugger allows you to do just that.

To set a variable's value:

  1. Follow Steps 1 through 3 in the previous list.

  2. Click on the line in the code right after the variable gets its initial value. Click on the Set/Remove Breakpoint button.

  3. Click on the Run button. This will run the code to the point where the variable has a value already set.

  4. In the right column of the variable watch section of the debugger window (Figure 13.46), click on the variable's value. Type in the desired value.

  5. Click on the Run button or the Step Into button. This will show you what happens to your page when the variable has the specified value.


  • The JavaScript debugger window works with Internet Explorer for Windows and Netscape version 4.x for Windows. It does not work with Netscape 6 or later or the Macintosh version of Internet Explorer.

  • If you use only the built-in behaviors, after you click the Run button, the debugger will not kick in until you actually trigger one of those behaviors.

In the next chapter we'll look at Dream-weaver Templates, which, when used properly, can add coherence and consistency to your Web site.

  • + Share This
  • 🔖 Save To Your Account