Appendix Q: JavaScript Debugger Feature (Discontinued in MX 2004)

Debugging Your JavaScript

A Note on Versions Previous versions of Dreamweaver have included a debugger for stepping through scripts to locate and fix JavaScript errors. Dreamweaver MX 2004 has discontinued the debugger feature. If the version of Dreamweaver you are running is Dreamweaver MX or Dreamweaver 4, you can still use this feature. You will not find this feature in MX 2004, even though the View Options toolbar includes a tooltip that says “Preview/Debug in Browser.” In supported versions, you’ll find the Debug JavaScript button on the View Options toolbar when the Document window is in Code view or the Code inspector is launched. For further instructions, please keep reading.

Dreamweaver (see version note) includes a JavaScript Debugger, which allows you to find problems in your JavaScript code. Even if you are 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 that includes 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 are 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 are using Internet Explorer (Windows only, the debugger does not 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, and the browser will stop at the first line of JavaScript code.
4. Click on a line in the code just before you think something is going wrong, and add a breakpoint either by clicking the Set/Remove Breakpoint button or pressing 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.
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-4 in the previous list.
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. Press Enter (Return).
   or
   Without highlighting a variable, click on the Plus button and type the variable name. Press Enter (Return).
4. Click on the Run button. The variable’s value will be updated in the bottom half 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 zodiac sign calculator, for example, when someone claims they were born in 1865? Or 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-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 pane of the variable watch section of the debugger window, 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.
   4 Tips
   · The JavaScript Debugger window 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 hit run, the debugger will not kick in until you actually trigger one of those behaviors.