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.
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.
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:
Open Microsoft Internet Explorer.
On the Tools menu, click
Internet Options.
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.
Close Internet Explorer.
To create a new ASP.NET Web application in Visual C# .NET
or in Visual C# 2005, follow these steps:
Open Visual Studio .NET or Visual Studio
2005.
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.
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.
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.
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:
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.
In the First Number text box,
type 16.
In the Second Number text box,
type 2.
Click Divide. Notice that
Result text box does not display 8 as you might
expect.
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:
On the Debug menu, click
Start to build and to run the application.
When the page opens in the browser, type
16 in the First Number text
box.
In the Second Number text box, type
2.
Click Divide. Notice that execution
stops at the debugger keyword, and that control is transferred to the Visual
Studio .NET IDE.
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.
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:
On the Debug menu, click
Start to build and to run the application.
When the page opens in the browser, type
16 in the First Number text
box.
In the Second Number text box, type
2.
Click Divide. Notice that execution
stops at the beginning of the btnDivide_Clicked routine.
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.
On the Debug menu, click
Continue. Control is returned to the browser, and the
Result text box displays the correct result.
Back to the top
