Microsoft KB Archive/317699

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

Article ID: 317699

Article Last Modified on 11/26/2007

-

APPLIES TO


 * Microsoft Visual Basic 2005
 * Microsoft Visual Basic .NET 2003 Standard Edition
 * Microsoft Visual Basic .NET 2002 Standard Edition

-



This article was previously published under Q317699



IN THIS TASK
SUMMARY Requirements Debugging Client-Side Script in Visual Basic .NET
 * Create the Application
 * Debug the Application
 * Modify the Code

Complete Code Listings
 * Create the Application
 * Debug the Application
 * Modify the Code

REFERENCES



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.

back to the top

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:  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. 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:  Open Visual Studio .NET or Visual Studio 2005.</li> 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.</li> 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.</li> In the Name text box, type ScriptDebuggingExample .</li></ol> </li> 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.</li>  Copy and paste the following code inside the <FORM> tags: This code creates the two input text boxes, a calculation button, and a third text box that displays the results. </li>  Copy and paste the following code into your page; make sure that you position the code block before the first <BODY> tag: <SCRIPT language=&quot;javascript&quot;> 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: <ul> Retrieve input values.</li> Calculate input.</li> Display result.</li></ul>

</li> Click Save.</li> 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.</li> <li>In the First Number text box, type 16 .</li> <li>In the Second Number text box, type 2 .</li> <li>Click Divide. Notice that Result text box does not display 8 as you might expect.</li> <li>Close Internet Explorer.</li></ol> </li></ol>

back to the top

Debug the Application
The Microsoft Script Debugger is useful for debugging client-side script in your ASP.NET application. You can use the &quot;debugger&quot; keyword to invoke the Microsoft Script Debugger programmatically in the script code. <ol> <li> 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. </li> <li>Click Save.</li> <li>To run the project, follow these steps: <ol style="list-style-type: lower-alpha;"> <li>On the Debug menu, click Start to build and to run the application.</li> <li>When the page opens in the browser, type 16 in the First Number text box.</li> <li>In the Second Number text box, type 2 .</li> <li>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).</li> <li>Close Internet Explorer.</li></ol> </li> <li> Right-click the following line of code: intResult = intNumber1/intNumber2; and then click Insert Breakpoint. </li> <li>On the Debug menu, click Continue.</li> <li>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.</li> <li>On the Debug menu, click Stop Debugging to close the debugger and browser windows. Control is returned to the IDE.</li></ol>

back to the top

Modify the Code
<ol> <li> 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; </li> <li>Click Save.</li> <li>To test the project again, follow these steps: <ol style="list-style-type: lower-alpha;"> <li>On the Debug menu, click Start to build and to run the application.</li> <li>When the page opens in the browser, type 16 in the First Number text box.</li> <li>In the Second Number text box, type 2 .</li> <li>Click Divide. Notice that execution stops at the beginning of the btnDivide_Clicked routine.</li> <li>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.</li> <li>On the Debug menu, click Continue. Control is returned to the browser, and the Result text box displays the correct result.</li> <li>Close Internet Explorer.</li></ol> </li></ol>

back to the top

Create the Application
<%@ Page Language=&quot;vb&quot; AutoEventWireup=&quot;false&quot; Codebehind = &quot;WebForm1.aspx.vb&quot; Inherits=&quot;ScriptDebuggingExample.WebForm1&quot;%> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;> <HTML> <HEAD> WebForm1 <meta content=&quot;Microsoft Visual Studio.NET 7.0&quot; name=&quot;GENERATOR&quot;> <meta content=&quot;Visual Basic 7.0&quot; name=&quot;CODE_LANGUAGE&quot;> <meta content=&quot;JavaScript&quot; name=&quot;vs_defaultClientScript&quot;> <meta content=&quot;http://schemas.microsoft.com/intellisense/ie5&quot; name=&quot;vs_targetSchema&quot;> <SCRIPT language=&quot;javascript&quot;> 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=&quot;GridLayout&quot;> <form id=&quot;Form1&quot; method=&quot;post&quot;> </HTML> back to the top

Debug the Application
<%@ Page Language=&quot;vb&quot; AutoEventWireup=&quot;false&quot; Codebehind = &quot;WebForm1.aspx.vb&quot; Inherits=&quot;ScriptDebuggingExample.WebForm1&quot;%> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;> <HTML> <HEAD> WebForm1 <meta content=&quot;Microsoft Visual Studio.NET 7.0&quot; name=&quot;GENERATOR&quot;> <meta content=&quot;Visual Basic 7.0&quot; name=&quot;CODE_LANGUAGE&quot;> <meta content=&quot;JavaScript&quot; name=&quot;vs_defaultClientScript&quot;> <meta content=&quot;http://schemas.microsoft.com/intellisense/ie5&quot; name=&quot;vs_targetSchema&quot;> <SCRIPT language=&quot;javascript&quot;> 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=&quot;GridLayout&quot;> <form id=&quot;Form1&quot; method=&quot;post&quot;> </HTML> back to the top

Modify the Code
<%@ Page Language=&quot;vb&quot; AutoEventWireup=&quot;false&quot; Codebehind = &quot;WebForm1.aspx.vb&quot; Inherits=&quot;ScriptDebuggingExample.WebForm1&quot;%> <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;> <HTML> <HEAD> WebForm1 <meta content=&quot;Microsoft Visual Studio.NET 7.0&quot; name=&quot;GENERATOR&quot;> <meta content=&quot;Visual Basic 7.0&quot; name=&quot;CODE_LANGUAGE&quot;> <meta content=&quot;JavaScript&quot; name=&quot;vs_defaultClientScript&quot;> <meta content=&quot;http://schemas.microsoft.com/intellisense/ie5&quot; name=&quot;vs_targetSchema&quot;> <SCRIPT language=&quot;javascript&quot;> 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=&quot;GridLayout&quot;> <form id=&quot;Form1&quot; method=&quot;post&quot;> </HTML> back to the top

<div class="references_section">