Debugging FrontPage 2002 Scripts with the Script Editor

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

July 2002

Lee Wayl

Applies to:
     FrontPage 2002

Summary:   The Microsoft Script Editor included with FrontPage 2002 provides powerful tools for incorporating client-side scripts in your Web site. The Script Editor's debugging tools allow developers to quickly track down and eliminate faults in their scripts.

Table of Contents

Introduction
Stepping Through a Script
Monitoring a Script
Working with Breakpoints
A Sample Script
Conclusion

Introduction

The Microsoft® FrontPage® 2002 Web site creation and management tool includes a version of Microsoft Script Editor that is significantly improved over the version in FrontPage 2000. It provides powerful tools for incorporating client-side scripts in your Web site. Web developers can use it effectively to create and modify Microsoft Visual Basic® Scripting Edition (VBScript) and JavaScript scripts to add dynamic functionality to pages. One of the most useful capabilities that the Script Editor offers is its array of debugging tools that allow developers to quickly track down and eliminate faults in their scripts.

Without debugging tools, finding an elusive bug in a Web script can be a tedious and difficult process, involving continually modifying and rerunning the script in an effort to figure out where the problem lies. The Script Editor's debugging features make it easy to run just a particular segment of a script to isolate bugs, to run scripts one line at a time, and to monitor variables while a script runs.

The Script Editor and debugger are not installed by default. In FrontPage 2002, choose Macros from the Tools menu, and then click Microsoft Script Editor. If you don't have the Script Editor installed, FrontPage will prompt you to install it. Follow the on-screen instructions to do so. Once the Script Editor is installed, launch it and go to the Debug menu to see if the debugger is installed. If not, you will again be prompted to install, which you should do.

Stepping Through a Script

One of the most useful ways to debug a script is to step through it line-by-line or statement-by-statement. Microsoft Script Editor offers several ways of doing this. With a script open in the Script Editor, go to the Debug menu. Choose Step By Line or Step By Statement, depending on how you want to proceed through the script. In many cases, lines and statements are the same. You can change this setting at any time.

To step through a script, choose Step Into or Step Over from the Debug menu. These commands perform almost identically, proceeding step by step through the script according to the step increment you chose. The difference between them is in how they handle function calls. When a function call is encountered, Step Into continues stepping through the code in the function that is called, whereas Step Over executes the entire function as a unit without pausing. Use Step Over if you are sure that the function is bug free; use Step Into if you want to step through the function to trace the script more closely. When you are within a function and want to return to the main script, choose Step Out from the Debug menu.

To run your script from the beginning until it reaches a specific location, position the cursor in the script where you want execution to break and then choose Run To Cursor from the Debug menu. This is a simplified form of breakpoint, a concept that we will cover in detail later.

Monitoring a Script

While you step through a script, you can examine various aspects of the script as it progresses. There are a number of different monitoring features offered by the Script Editor. The Window drop-down menu within the Debug menu allows you to toggle the presence of these features.

The Watch window displays variables in the script, giving their name, value, and type at any given moment. Type the names of the variables you want to monitor in the Name column, and their values will appear. You can modify the value of any variable by simply typing the new value in the Value field and seeing how it affects your running script. You also can use the Watch window to instantly evaluate an arithmetic expression with variables by typing the expression in an empty row and pressing ENTER.

If you just want to monitor a single variable, select CTRL+ALT+Q to display the QuickWatch dialog box, or right-click a variable in a script to bring it up from the context menu. The QuickWatch dialog box offers the same features as the Watch window, allowing you to evaluate an expression or change a variable instantly by clicking Recalculate. If you want to save a calculation you have made, click Add Watch to add that value to the Watch window.

You also can monitor variables in the Autos window, which automatically displays all variables used in the current statement and the previous statement. These can be modified in the same way. The Locals window functions similarly but displays only the local variables of the currently running function.

You can view currently stacked function calls in the Call Stack window. For each function, a variety of information is displayed, including scripting language, line number, byte number, and parameter information required by the function.

Working with Breakpoints

Breakpoints are extremely useful for isolating just where in a script things are going wrong. When a breakpoint is placed at a certain point in a script, the debugger runs the script up until the breakpoint and then breaks, or pauses, script execution so that the state of the script can be examined and debugged.

There are two types of breakpoint that can be set in the debugger: function breakpoints and file breakpoints. A function breakpoint causes execution to break when a specified point in a function is reached; a file breakpoint causes execution to break when a specified point in a file is reached. Additionally, you can specify a particular condition that must be met at this point for execution to stop — for example, when the value of a certain variable reaches 10 or simply when the value of a variable changes. Breakpoints can be keyed to the Hit Count property so that the break will occur, say, only on the fifth time that a given statement is reached. All of these settings can be adjusted in the Breakpoint Properties dialog box.

To add a new breakpoint, simply click in the left margin of the script next to the line where you want the breakpoint to be. A red dot should appear, indicating the position of the breakpoint.

Right-clicking this dot will bring up a menu that allows you to edit the properties of a breakpoint, remove a breakpoint or temporarily disable it, or add a new breakpoint to your specifications. Breakpoints can be edited and deleted all at once by clicking Debug, then Windows, and then Breakpoints.

To remove all breakpoints from a script, choose Clear All Breakpoints from the Debug menu.

A Sample Script

Here is a simple sample JavaScript script, created for purely illustrative purposes, that you can step through with the debugging tools.

<html>
<body>
<form>
Enter Starting Number: <input name="input" 
onChange="for (years=form.input.value;years<1000;years=i+1) {
months = years * 12;
days = years * 365; 
}
form.output.value = days;">
<p>
<p>Result: <input name="output"> <br>
</form>
</body>
</html>

Stepping through this script line-by-line, you can monitor the progress of the various variables with the Watch window. If the initial form entry is 7, then on the first iteration of the for loop, years is equal to 7, months is 84, and days is 2555. When you step through the loop a second time, years has incremented to 8, months to 96, and days is 2920. The third time through, years is 9, months is 108, and days is 3285.

If, while the script runs, you want to keep an eye on other factors, that's simple as well. Typing the expression "days / 2" into an empty field in the Watch window will create a new row in that window wherein that expression will be constantly evaluated, in addition to the variables in the script. To test alternate conditions, you can, for example, click on the value of the years variable in the Watch window and change it to 900, and watch as the correlated variables adjust themselves accordingly.

To set a breakpoint that will halt the script when it has exceeded 1,000 days, click in the left margin next to the line "days = years * 365". A red dot will appear indicating a breakpoint. Right-click on the dot and choose Breakpoint Properties from the popup menu. Click on the Condition button, and type "days > 1000" into the box, then click OK. When executing the script, it will iterate three times and then halt. The Watch window will display that the days variable has exceeded 1,000.

Conclusion

This tutorial has provided an introduction to the script debugging features of Microsoft FrontPage 2002. The tools are very versatile and can be used in a variety of ways for isolating bugs, optimizing code, tracing variables, and monitoring script execution.

Lee Wayl is a computer professional and freelance writer whose work has appeared in many prominent publications, including Wired.