Visual InterDev

  • Article

      

Debugging script allows you to find errors in your script, such as syntax errors, run-time errors, and logic errors, before you publish that script to the World Wide Web. You probably already know how to set breakpoints for debugging and how to step through lines of script. Now you can see how to accomplish these tasks using Microsoft® Visual InterDev™.

In Visual InterDev, debugging script consists of some or all of these steps, once you have added script to a page:

  • Adding Client Script to an HTML Page

  • Setting Breakpoints

  • Stepping Through Lines of Script

  • Changing the Value of a Variable

Adding Client Script to an HTML Page

Debugging client script is an easy way to become familiar with debugging in Visual InterDev. Client-side script is processed on the browser, while server-side script is processed on the Web server. For more information about client and server script, see Debugging Client Script and Debugging Server Script.

To use this walkthrough, you will need to create a file with script to debug. The sample client script, located between the <SCRIPT>``</SCRIPT> tags in the example below, validates the length of password entries made in a simple form. The remaining HTML tags define the form and do not participate in the script debugging process.

To use the script below, create a new .htm file and switch to view in the HTML editor. Copy the script and HTML then right-click and choose Paste As Text from the shortcut menu. For more information, see Scripting with HTML Elements.

<SCRIPT LANGUAGE="JavaScript">
function validatePassword()
{
   var password;
   password = document.frm1.txtPassword.value;
   // debugger;
   alert("You entered " + password);
   if (password.length < 4) {
      alert("You must enter 4 characters or more!");
      document.frm1.txtPassword.select();
      return false;
   }
   else {
      alert ("Your form is being submitted!");
      return true;
   }
}
</SCRIPT>
<P><H2>Please enter a password.</H2>
<P>
<FORM NAME="frm1" METHOD="Post" ACTION="Process.asp" OnSubmit="return validatePassword()">
    <INPUT NAME="txtPassword" TYPE="Password">
    <INPUT NAME="btnSubmit" TYPE="Submit" VALUE="Submit">
    <INPUT NAME="btnReset" TYPE="Reset" VALUE="Reset">
</FORM>

Note   JavaScript is case sensitive, so the sample script above must appear in your .htm file exactly as it does here.

When the user clicks the Submit button, the script checks that the password length is four characters or greater. The script generates a message box listing the password the user entered. If the password is four characters or greater in length, the user is then redirected to the page called by the Action element of the <FORM> tag.

If you haven't created Process.asp, the file that the form will call, the browser will display the "object not found" error. If the password is fewer than four characters in length, a message box appears indicating the character length requirement.

Setting Breakpoints

To specify a place in the script where you want to stop and examine the state of the process, you can use breakpoints. Breakpoints indicate the line of script you want to stop on in the application. You can then step through, step into, or step over lines of script individually to find errors. Breakpoints show up as red octagons to the left of a line of script in Source view.

Note   To debug client scripts in Microsoft® Internet Explorer, you must be using Internet Explorer 4.0 and debugging must be enabled. For details, see the Internet Explorer documentation.

To set breakpoints

  1. Open the .htm file and select Source view.

  2. Place the cursor in the line of script you want to set a breakpoint in.

  3. From the Debug menu, choose Insert Breakpoint.

    A red octagon appears to the left of the line of script.

    Note   You can also set or remove a breakpoint by placing the cursor in a line of script and pressing F9.

To launch the debugger

  1. In the Project Explorer, right-click the .htm file and select Set As Start Page.

  2. Launch Internet Explorer 4.0 and load the .htm page into the browser.

  3. From the Debug menu in Visual InterDev, choose Processes.

    The dialog box appears.

  4. In the Process area, select Microsoft Internet Explorer, and then select Attach.

    Microsoft Internet Explorer and your machine name appear in the Debugged Processes area.

  5. In Internet Explorer, enter a password and choose Submit.

The script executes until Internet Explorer reaches the breakpoint. When Internet Explorer reaches the breakpoint, it stops and displays the source script in Source view.

A yellow arrow superimposed over the breakpoint icon indicates the line of script where the debugger stopped.

For more information, see or Debugging Client Script.

Stepping Through Lines of Script

To execute script one line at a time, you can use Step Into. After stepping through each line, you can view the effects of the statement by looking at the page in Internet Explorer.

To step into lines of script

  1. Open the .htm file in Source view and set a breakpoint at the following line of script:

    <FORM NAME="frm1" METHOD="Post" ACTION="Process.asp" OnSubmit="return validatePassword()">

    Note   When you place a breakpoint in the line of HTML above, you are actually specifying that the script stop executing when you click the Submit button, OnSubmit="return validatePassword()".

  2. Launch the debugger.

  3. Enter a two-character password and choose Submit.

    Internet Explorer reaches the breakpoint and switches to Source view. A yellow arrow appears superimposed over the breakpoint icon.

  4. From the Debug menu, choose Step Into, and then choose Step Into a second time.

    The following line of script is highlighted:

    alert("You entered " + password);

  5. From the Debug menu, choose Step Into again.

    Internet Explorer executes the alert script and displays the message box.

  6. Choose OK.

    Internet Explorer reaches the next line of script and switches to Source view.

You can continue stepping into lines of script and view the results in Internet Explorer.

To execute procedures in script as a single unit, you can use Step Over. Step Over allows you to skip a procedure or function and step through the next procedure or function.

After stepping over a procedure, you can view the effects of the procedure by looking at the page in Internet Explorer.

To step over lines of script

  1. Open the .htm file in Source view and set a breakpoint at the following line of script:

    <FORM NAME="frm1" METHOD="Post" ACTION="Process.asp" OnSubmit="return validatePassword()">

    Note   When you place a breakpoint in the line of HTML above, you are actually specifying that the script stop executing when you click the Submit button, OnSubmit="return validatePassword()".

  2. Launch the debugger.

  3. Enter a three-character password and choose Submit.

    Internet Explorer reaches the breakpoint and switches to Source view. A yellow arrow appears superimposed over the breakpoint icon.

  4. From the Debug menu, choose Step Over.

  5. Choose OK in each alert message.

    Internet Explorer executed the following script as a procedure unit:

    password = document.frm1.txtPassword.value;
//debugger;
alert("You entered " + password);
if (password.length < 4){
alert("You must enter 4 characters or more!");
document.frm1.txtPassword.select();
return false;

Internet Explorer reaches the line of script after the procedure unit and switches back to Source view. For more information, see Debugging Your Pages and .

Changing the Value of a Variable

You can assign variables in your script as you debug. You change the value of a variable from the Immediate window. When Internet Explorer reaches a breakpoint and switches to Source view, you can then change the value of a variable and view the results in the Locals window.

To change the value of a variable

  1. Open the .htm file in Source view and set a breakpoint at the following line of script:

    <FORM NAME="frm1" METHOD="Post" ACTION="Process.asp" OnSubmit="return validatePassword()">

  2. Launch the debugger.

  3. Enter a three-character password and choose Submit.

    Internet Explorer reaches the breakpoint and switches to Source view. A yellow arrow appears superimposed over the breakpoint icon.

  4. From the Debug menu in Visual InterDev, choose Step Into.

  5. From the View menu, select Debug Windows, and then select Immediate.

  6. In the Immediate window, type the following:

    password="test"

  7. Press Enter.

  8. From the View menu, select Debug Windows, and then select Locals.

    The Locals window displays the new value of the variable you entered in the Immediate window.

For more information, see and .