How to debug client-side script in Visual ?# .NET or in Visual C# 2005

View products that this article applies to.

Summary

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

Visual ?# provides a number of new debugging features that enable you to more easily identify and diagnose problems in your code.

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 C#

Debugging Client-Side Script in Visual C# .NET or in Visual C# 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. With Visual Studio .NET or Visual Studio 2005, you have greater control when you debug client-side script by using the integrated debugger and the Locals window.

Create the Application

In this section, you create an ASP.NET Web application that displays three HTML TextBox controls together 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.
  
  Note In Microsoft Windows Server 2003, click to clear the Disable script debugging (Internet Explorer) check box.
4. Close Internet Explorer.
To create a new ASP.NET Web application in Visual C# .NET or in Visual C# 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 ?# 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, and then select Visual C# on the right of Language.
4. In the Name text box, type ScriptDebuggingExample.
  
  Note In Visual Studio 2005, click OK.
Switch to the HTML view of the WebForm1.aspx file.

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

Important Paste the code segments as HTML: right-click where you will insert the code, and then click Paste as HTML.

<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 Script Debugger stops execution and starts the debugger. You can use this keyword 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 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 and that this 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. Make sure 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. Notice 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.

Complete Code Listings

Create the Application

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptDebuggingExample.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 

<html>
  <head>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
  </head>
  <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>

  <body MS_POSITIONING="GridLayout">
	
    <form id="Form1" method="post" runat="server">
    <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>

    </form>
	
  </body>
</html>

Debug the Application

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptDebuggingExample.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 

<html>
  <head>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
  </head>
  <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>

  <body MS_POSITIONING="GridLayout">
	
    <form id="Form1" method="post" runat="server">
    <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>

    </form>
	
  </body>
</html>

Modify the Code

<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="ScriptDebuggingExample.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 

<html>
  <head>
    <title>WebForm1</title>
    <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
    <meta name="CODE_LANGUAGE" Content="C#">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
  </head>
  <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>

  <body MS_POSITIONING="GridLayout">
	
    <form id="Form1" method="post" runat="server">
    <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>

    </form>
	
  </body>
</html>

↑ Back to the top