How to debug client-side script in Visual Basic .NET or in Visual Basic 2005

View products that this article applies to.

This article was previously published under Q317699

SUMMARY

This step-by-step article describes how to debug client-side script in a Microsoft ASP.NET application by using Visual Basic .NET or Visual Basic 2005 and the Microsoft Script Debugger.

Visual Basic .NET or Visual Basic 2005 provides a number of new debugging features that enable you to more easily identify and diagnose problems in your code.

Back to the top

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:

Microsoft Visual Studio .NET or Microsoft Visual Studio 2005
Microsoft Internet Information Services (IIS) 5.0 or later
Microsoft Script Debugger

This article assumes that you are familiar with the following topics:

Web applications
ASP.NET
Visual Basic .NET or Visual Basic 2005

Back to the top

Debugging Client Side-Script in Visual Basic .NET or in Visual Basic 2005

In earlier versions of Microsoft Active Server Pages (ASP), applications can be hard to debug, particularly if the bugs occur in client-side script code. Visual Studio .NET allows you greater control when you debug client-side script through the integrated debugger and the Locals window.

Create the Application

In this section, you create an ASP.NET Web application (ASP.NET Web Site in Visual Studio 2005) that displays three HTML TextBox controls along with a Button control that calculates the input. This sample uses JavaScript to program the Button control.

To use the debugger with client-side JavaScript, you must first enable script debugging for the browser. To do this, follow these steps:
1. Open Microsoft Internet Explorer.
2. On the Tools menu, click Internet Options.
3. On the Advanced tab, locate the Browsing section, clear the Disable script debugging check box, and then click OK.
4. Close Internet Explorer.
To create a new ASP.NET Web application in Visual Basic .NET (ASP.NET Web Site in Visual Studio 2005), follow these steps:
1. Open Visual Studio .NET or Visual Studio 2005.
2. On the File menu, point to New, and then click Project.
  
  Note In Visual Studio 2005, point to New on the File menu, and then click Web Site.
3. In the New Project dialog box, click Visual Basic Projects under Project Types, and then click ASP.NET Web Application under Templates.
  
  Note In Visual Studio 2005, click ASP.NET Web Site under Templates.
4. In the Name text box, type ScriptDebuggingExample.
Switch to the HTML view of the WebForm1.aspx file.

Note In Visual Studio 2005, switch to the HTML view of the Default.aspx file.

Copy and paste the following code inside the <FORM> tags:

<table>
   <tr>
      <td width="100">
	<asp:label id="lblFirstNumber" runat="server" Width="125">
	   First Number:
	</asp:label>
      </td>
      <td width="50">
	<input id="txtNumber1" type="text" maxLength="3" 
	   size="5" name="txtNumber1">
      </td>
    </tr>
    <tr>
      <td width="100">
	<asp:label id="lblSecondNumber" runat="server" Width="125">
	   Second Number:
	</asp:label>
      </td>
      <td width="50">
	<input id="txtNumber2" type="text" maxLength="3" 
	   size="5" name="txtNumber2">
      </td>
     </tr>
     <tr>
       <td width="100">
	<asp:Label id="lblResult" runat="server" Width="125">
	    Result:
	</asp:Label>
	</td>
	<td width="50">
	  <input id="txtResult" type="text" size="5" maxlength="5" 
	     NAME="txtResult" readonly>
	</td>
      </tr>
    </table>
  <br>
<table>
   <tr>
      <td width="150" align="center">
        <input id="btnDivide" onclick="return btnDivide_Clicked()" 
          type="submit" value=" Divide " name="btnDivide">
      </td>
   </tr>
</table>

This code creates the two input text boxes, a calculation button, and a third text box that displays the results.

Copy and paste the following code into your page; make sure that you position the code block before the first <BODY> tag:

<SCRIPT language="javascript">
   function btnDivide_Clicked()
   {    var intNumber1 = 0;
        var intNumber2 = 0;
        var intResult = 0;
			
        intNumber1 = document.all('txtNumber1').value;
        intNumber2 = document.all('txtNumber1').value;
        intResult = intNumber1/intNumber2;
        document.all('txtResult').value = intResult;
        return false;
    }
</SCRIPT>

This code programs the button so that the following functions occur when you click the button:

Retrieve input values.
Calculate input.
Display result.

Click Save.
To test the project, follow these steps:
1. On the Debug menu, click Start to build and to run the application. WebForm1 opens in the browser and displays two input text boxes, a result text box, and a button.
2. In the First Number text box, type 16.
3. In the Second Number text box, type 2.
4. Click Divide. Notice that Result text box does not display 8 as you might expect.
5. Close Internet Explorer.

Debug the Application

The Microsoft Script Debugger is useful for debugging client-side script in your ASP.NET application. You can use the "debugger" keyword to invoke the Microsoft Script Debugger programmatically in the script code.

Add the following code as the first code in the btnDivide_Clicked procedure:
debugger
This keyword indicates where the Script Debugger should stop execution and start the debugger. This keyword allows you to trace the values of variables throughout the remainder of the routine.
Click Save.
To run the project, follow these steps:
1. On the Debug menu, click Start to build and to run the application.
2. When the page opens in the browser, type 16 in the First Number text box.
3. In the Second Number text box, type 2.
4. Click Divide. Notice that execution stops at the debugger keyword, and that control is transferred to the Visual Studio .NET or Visual Studio 2005 integrated development environment (IDE).
5. Close Internet Explorer.
Right-click the following line of code:
intResult = intNumber1/intNumber2;
and then click Insert Breakpoint.
On the Debug menu, click Continue.
On the Debug menu, point to Windows, and then click Locals. Notice that this sets the value of intNumber1 to 16 as expected. However, notice that this also sets the value of intNumber2 to 16, which does not correspond to the value that you typed. The intNumber2 variable is assigned the same value as intNumber1.
On the Debug menu, click Stop Debugging to close the debugger and browser windows. Control is returned to the IDE.

Modify the Code

Replace the code

   intNumber2 = document.all('txtNumber1').value;

with the following code to assign the correct value to the intNumber2 variable:

   intNumber2 = document.all('txtNumber2').value;

Click Save.
To test the project again, follow these steps:
1. On the Debug menu, click Start to build and to run the application.
2. When the page opens in the browser, type 16 in the First Number text box.
3. In the Second Number text box, type 2.
4. Click Divide. Notice that execution stops at the beginning of the btnDivide_Clicked routine.
5. Ensure that the Locals window is still open. On the Debug menu, click Step Into to step through the code line by line until you reach the Return statement. Note that the intNumber1 and the intNumber2 variables display the correct values.
6. On the Debug menu, click Continue. Control is returned to the browser, and the Result text box displays the correct result.
7. Close Internet Explorer.

Back to the top

Complete Code Listing

Create the Application

<%@ Page Language="vb" AutoEventWireup="false" Codebehind = "WebForm1.aspx.vb" 
Inherits="ScriptDebuggingExample.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>WebForm1</title>
    <meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
    <meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
    <SCRIPT language="javascript">
       function btnDivide_Clicked()
       {  var intNumber1 = 0;
	  var intNumber2 = 0;
	  var intResult = 0;
				
	  intNumber1 = document.all('txtNumber1').value;
	  intNumber2 = document.all('txtNumber1').value;
	  intResult = intNumber1/intNumber2;
	  document.all('txtResult').value = intResult;
	  return false;
       }
    </SCRIPT>
  </HEAD>
<body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post">
      <table>
	<tr>
	  <td width="100">
	     <asp:label id="lblFirstNumber" runat="server" Width="125">
	        First Number:
	   </asp:label>
	</td>
	<td width="50">
	   <input id="txtNumber1" type="text" maxLength="3" 
              size="5" name="txtNumber1">
	  </td>
	</tr>
	<tr>
          <td width="100">
	    <asp:label id="lblSecondNumber" runat="server" <BR/>
               Width="125">
	     Second Number:
	  </asp:label>
	  </td>
	  <td width="50">
	     <input id="txtNumber2" type="text" maxLength="3" 
                size="5" name="txtNumber2">
	  </td>
	</tr>
	<tr>
          <td width="100">
	     <asp:Label id="lblResult" runat="server" Width="125">
	        Result:
	    </asp:Label>
	  </td>
	  <td width="50">
             <input id="txtResult" type="text" size="5" maxlength="5" 
	        NAME="txtResult" readonly>
	   </td>
	</tr>
    </table>
    <table>
        <tr>
	  <td width="75" align="center">
	    <input id="btnDivide" value=" Divide " 
               onclick="return btnDivide_Clicked()" 
	      type="submit" size="50" name="btnDivide">
	  </td>
        </tr>
      </table>
    </form>
  </body>
</HTML>

Debug the Application

<%@ Page Language="vb" AutoEventWireup="false" Codebehind = "WebForm1.aspx.vb" 
Inherits="ScriptDebuggingExample.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
      <title>WebForm1</title>
      <meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
      <meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
      <meta content="JavaScript" name="vs_defaultClientScript">
      <meta content="http://schemas.microsoft.com/intellisense/ie5" 
	  name="vs_targetSchema">
      <SCRIPT language="javascript">
         function btnDivide_Clicked()
         {  debugger
            var intNumber1 = 0;
            var intNumber2 = 0;
            var intResult = 0;
				
	    intNumber1 = document.all('txtNumber1').value;
	    intNumber2 = document.all('txtNumber1').value;
	    intResult = intNumber1/intNumber2;
	    document.all('txtResult').value = intResult;
	    return false;
         }
      </SCRIPT>
   </HEAD>
   <body MS_POSITIONING="GridLayout">
      <form id="Form1" method="post">
         <table>
            <tr>
               <td width="100">
                  <asp:label id="lblFirstNumber" runat="server" 
                     Width="125">
		  First Number:
		</asp:label>
		</td>
		<td width="50">
		   <input id="txtNumber1" type="text" maxLength="3" 
		      size="5" name="txtNumber1">
		</td>
	     </tr>
	     <tr>
		<td width="100">
		   <asp:label id="lblSecondNumber" runat="server" 
                      Width="125">
		  Second Number:
		</asp:label>
		</td>
		<td width="50">
		   <input id="txtNumber2" type="text" maxLength="3" 
		      size="5" name="txtNumber2">
		</td>
	      </tr>
	      <tr>
		<td width="100">
		   <asp:Label id="lblResult" runat="server" Width="125">
		   Result:
		</asp:Label>
		</td>
		<td width="50">
		   <input id="txtResult" type="text" size="5" maxlength="5" 
		      NAME="txtResult" readonly>
		</td>
	      </tr>
	  </table>
	  <br>
	  <table>
	      <tr>
		 <td width="75" align="center">
		    <input id="btnDivide" value=" Divide " 
                       onclick="return btnDivide_Clicked()" 
		      type="submit" size="50" name="btnDivide">
		 </td>
	      </tr>
           </table>
	</form>
     </body>
</HTML>

Modify the Code

<%@ Page Language="vb" AutoEventWireup="false" Codebehind = "WebForm1.aspx.vb" 
Inherits="ScriptDebuggingExample.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
      <title>WebForm1</title>
      <meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR">
      <meta content="Visual Basic 7.0" name="CODE_LANGUAGE">
      <meta content="JavaScript" name="vs_defaultClientScript">
      <meta content="http://schemas.microsoft.com/intellisense/ie5" 
	 name="vs_targetSchema">
      <SCRIPT language="javascript">
	 function btnDivide_Clicked()
	 {  debugger
	    var intNumber1 = 0;
	    var intNumber2 = 0;
	    var intResult = 0;
				
	    intNumber1 = document.all('txtNumber1').value;
	    intNumber2 = document.all('txtNumber2').value;
	    intResult = intNumber1/intNumber2;
	    document.all('txtResult').value = intResult;
	    return false;
	  }
      </SCRIPT>
   </HEAD>
   <body MS_POSITIONING="GridLayout">
      <form id="Form1" method="post">
         <table>
	    <tr>
	       <td width="100">
	          <asp:label id="lblFirstNumber" runat="server" 
                     Width="125">
		  First Number:
		</asp:label>
		</td>
		<td width="50">
		   <input id="txtNumber1" type="text" maxLength="3" 
		      size="5" name="txtNumber1">
		</td>
	     </tr>
	     <tr>
		<td width="100">
		   <asp:label id="lblSecondNumber" runat="server" 
                      Width="125">
		   Second Number:
		 </asp:label>
		 </td>
		 <td width="50">
		    <input id="txtNumber2" type="text" maxLength="3" 
		       size="5" name="txtNumber2">
		 </td>
	      </tr>
	      <tr>
		 <td width="100">
		    <asp:Label id="lblResult" runat="server" Width="125">
		    Result:
		 </asp:Label>
		 </td>
		 <td width="50">
		   <input id="txtResult" type="text" size="5" maxlength="5" 
		      NAME="txtResult" readonly>
		 </td>
	       </tr>
	   </table>
	   <br>
	   <table>
	       <tr>
	         <td width="75" align="center">
		    <input id="btnDivide" value=" Divide " 
                        onclick="return btnDivide_Clicked()" 
		      type="submit" size="50" name="btnDivide">
	         </td>
	      </tr>
            </table>
	</form>
     </body>
</HTML>

Back to the top

REFERENCES

For more information about the Microsoft Script Debugger, see the following Microsoft Web sites:

Using the Script Debugger
http://msdn2.microsoft.com/en-us/library/ms875975.aspx (http://msdn2.microsoft.com/en-us/library/ms875975.aspx)

For more information about how to use the Microsoft Script Debugger to debug ASP.NET Web applications, see the following Microsoft Web site:

Debugging ASP.NET Web Applications
http://msdn2.microsoft.com/en-us/library/aa309369(VS.71).aspx (http://msdn2.microsoft.com/en-us/library/aa309369(VS.71).aspx)

Back to the top