How to debug an ASP.NET Web application (316726)

SUMMARY

Use this step-by-step guide to set up a breakpoint, use page-level tracing, and write out custom trace messages in an ASP.NET application.

The new debugging features in ASP.NET allow you to track progress through your Web applications and more easily identify and diagnose problems.

Requirements

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

• Microsoft Visual Studio .NET
• Microsoft Internet Information Services (IIS) 5.0

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

• Web applications
• Microsoft ASP.NET

Overview

Debugging a traditional ASP application generally involves placing Response.Write statements throughout your code to track variable values and execution paths. If you fail to remove debugging statements before you deploy your application, the statements are visible to users.

ASP.NET makes Web application debugging much simpler to use. You can use tracing statements to debug your application in a way that is similar to using Response.Write statements. However, you can leave the tracing statements in your application, even after deployment.

You can configure the Web application to allow tracing at either the page level or the application level, and you can easily turn it on and off. You can also control the destination of the tracing output to allow only certain users to see the debugging output.

Create an ASP.NET application and add breakpoints to debug the application

The following procedure creates a simple ASP.NET Web application that performs a calculation on two numbers and displays the results on the screen. When you add a breakpoint to the Add function, notice how the new interactive debugging capabilities of ASP.NET behave:

1. Start Microsoft Visual Studio .NET.
2. Create a new Visual Basic ASP.NET Web Application project. Name it ASPDebuggingExample.
3. In WebForm1.aspx, switch to HTML view.
4. Type or paste the following code between the opening and closing FORM tags.
   
   Note If you paste the code, paste it as HTML code. To do this, click Paste as HTML on the Edit menu.
   
   When you run the code, it prompts you to type two numbers and displays a command button. When you click the command button, the code adds the two numbers and displays the result on your screen.

   <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="0">
   
   <TR><TD>
   <asp:Label id="Label1" runat="server">First Number:</asp:Label>
   </TD>
   <TD>
   <asp:TextBox id="txtFirstNumber" runat="server"></asp:TextBox>
   </TD></TR>
   <TR><TD>
   <asp:Label id="Label2" runat="server">Second Number:</asp:Label>
   </TD>
   <TD>
   <asp:TextBox id="txtSecondNumber" runat="server"></asp:TextBox>
   </TD></TR>
   <TR><TD>
   <asp:Label id="Label3" runat="server">Sum:</asp:Label>
   </TD>
   <TD>
   <asp:TextBox id="txtSum" runat="server"></asp:TextBox>
   </TD></TR>
   <TR><TD>
   <asp:Button id="Button1" runat="server" Text="Add Numbers"></asp:Button>
   </TD>
   <TD>
   </TD></TR>
   </TABLE>
   					

5. Click the Design button in the lower-left corner of the Code window to switch to Design view.
6. Double-click Add Numbers to view the code and write an event handler for the command button's Click event.
7. Add the following code to the event handler.

   Dim intTotal as integer
   Dim intFirstNumber as integer
   Dim intSecondNumber as integer
   			
   ' Get the values from the input boxes.
   intFirstNumber = CInt(txtFirstNumber.Text)
   intSecondNumber = CInt(txtSecondNumber.Text)
   						
   ' Get the total and display it.
   intTotal = intFirstNumber + intSecondNumber
   txtSum.Text = CStr(intTotal)
   					

8. Select the following line of code in the Button1_Click routine.

   intTotal = intFirstNumber + intSecondNumber
   						

   Press F9 to set a breakpoint on this line.
   
   A breakpoint indicator appears on the line of code.
9. Save the file.
10. Build and then run the application. To do this, click Start on the Debug menu.
    
    WebForm1 appears on the screen. The input controls and the submit button also appear on the form.
11. Type a number in each of the first two input controls, and then click Add Number.
    
    The Visual Studio .NET Integrated Development Environment (IDE) comes into focus and the code halts when the breakpoint is reached. You can use the Locals window to examine the contents of the variables and make any changes you want. You can add one or more watches to trace the values of the variables in the routine. Or, you can continue running the application.
12. On the Debug menu, click Continue to continue running the application.
    
    WebForm1 appears on the screen and the result appears in the third input box.
13. Close the Web browser and return to the Visual Studio .NET IDE.
14. On the Debug menu, click Clear All Breakpoints to remove all breakpoints from the application.

Verify that it works

When you click Add Number, the Visual Studio .NET IDE comes into focus and the code stops running at the point where the breakpoint is specified.

Add page-level tracing to the ASP.NET application

The following procedure sets up the Web application to allow the tracing output to be displayed. It adds the page level Trace directive to the page to indicate that page-level tracing is being used. The tracing code throughout the page tracks execution and the variable contents:

1. In WebForm1.aspx, switch to HTML view. Add the following attribute-value pair to the page directive at the top of the Code window.

   Trace=True
   					

2. Right-click WebForm1.aspx, and then click View Code.
3. In the Button1_Click routine, use trace statements to display the contents of variables at several different points in the routine.
   
   For example, replace the existing routine with the following.

   Trace.Write("Button1_Click", "Entering the Add routine")
   			
   Dim intTotal as integer
   Dim intFirstNumber as integer
   Dim intSecondNumber as integer
   			
   ' Get values from the input boxes.
   intFirstNumber = CInt(txtFirstNumber.Text)
   intSecondNumber = CInt(txtSecondNumber.Text)
   Trace.Write("Button1_Click", "Amount to add:" & _
   CStr(intFirstNumber) & " and " & CStr(intSecondNumber))
   			
   ' Get the total and display it.
   intTotal = intFirstNumber + intSecondNumber
   Trace.Write("Button1_Click", "Total:" & CStr(intTotal))
   txtSum.Text = CStr(intTotal)	
   			
   Trace.Write("Button1_Click", "Leaving the Add routine")
   					

4. Click Save.
5. On the Debug menu, click Start to build and run the application.
   
   WebForm1 appears on the screen. Notice the tracing information for the application, such as request information, tracing information, the hierarchical listing of controls on the page, and any persistent items in the Application or Session states.
6. Type numbers into the first two input controls, and then click Add Number.
   
   The result appears in the third input box. And, the custom trace messages from the Button1_Click routine appear in the Trace Information section.

Verify that it works

The first time the form loads, general tracing information for the page is displayed. If you click the Add Number button, the custom trace messages from the Button1_Click routine appear in the Trace Information section.

Putting it all together

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>WebForm1</title>
		<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
		<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
	</head>
	<Script language="vb" runat="server" id="script1">
		Sub Button1_Click(Sender as object, e as EventArgs)
			Trace.Write("Button1_Click", "Entering the Add routine")
			
			Dim intTotal as integer
			Dim intFirstNumber as integer
			Dim intSecondNumber as integer
			
			' Get the values from the input boxes.
			intFirstNumber = CInt(txtFirstNumber.value)
			intSecondNumber = CInt(txtSecondNumber.value)
			Trace.Write("Button_Click", "Amount to add:" & CStr(intFirstNumber) & " and " & CStr(intSecondNumber))
			
			' Get the total and display it.
			intTotal = intFirstNumber + intSecondNumber
			Trace.Write("Button1_Click", "Total:" & CStr(intTotal))
			txtTotal.value = CStr(intTotal)	
			
			Trace.Write("Button1_Click", "Leaving the Add routine")
		End Sub
	</Script>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<asp:Label id="lblFirstNumber" runat=server Width=125>
				First Number:
			</asp:Label> 
			<input id=txtFirstNumber type=text size=5 maxlength=3 
				runat=server NAME="txtFirstNumber"/>
			<br>
			<asp:Label id="lblSecondNumber" runat=server Width=125>
				Second Number:
			</asp:Label> 
			<input id=txtSecondNumber type=text size=5 maxlength=3 
				runat=server NAME="txtSecondNumber"/>
			<br>
			<asp:Label id="lblTotal" runat=server Width=125>
				Total:
			</asp:Label> 
			<input id="txtTotal" type=text size=5 maxlength=5 
				runat=server NAME="txtTotal" readonly/>
			<br><br>
			<input type=submit id=Button1 value="Add Numbers" onserverclick="Button1_Click" 
				runat=server NAME="Button1"/>
		</form>
	</body>
</html>
		"?><%@ Page Language="vb" Trace=true%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>WebForm1</title>
		<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
		<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
		<Script language="vb" runat="server" id="script1">
		Sub Button1_Click(Sender as object, e as EventArgs)
		
            Trace.Write("Button1_Click", "Entering the Add routine")			
            Dim intTotal as integer
            Dim intFirstNumber as integer
            Dim intSecondNumber as integer
            			
            ' Get values from the input boxes.
            intFirstNumber = CInt(txtFirstNumber.Text)
            intSecondNumber = CInt(txtSecondNumber.Text)
            Trace.Write("Button1_Click", "Amount to add:" & _
            CStr(intFirstNumber) & " and " & CStr(intSecondNumber))
            			
            ' Get the total and display it.
            intTotal = intFirstNumber + intSecondNumber
            Trace.Write("Button1_Click", "Total:" & CStr(intTotal))
            txtSum.Text = CStr(intTotal)	
            			
            Trace.Write("Button1_Click", "Leaving the Add routine")

		End Sub
		</Script>
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="0">
				<TR>
					<TD><asp:Label id="Label1" runat="server">First Number:</asp:Label>
					</TD>
					<TD>
						<asp:TextBox id="txtFirstNumber" runat="server"></asp:TextBox>
					</TD>
				</TR>
				<TR>
					<TD>
						<asp:Label id="Label2" runat="server">Second Number:</asp:Label>
					</TD>
					<TD>
						<asp:TextBox id="txtSecondNumber" runat="server"></asp:TextBox>
					</TD>
				</TR>
				<TR>
					<TD>
						<asp:Label id="Label3" runat="server">Sum:</asp:Label>
					</TD>
					<TD>
						<asp:TextBox id="txtSum" runat="server"></asp:TextBox>
					</TD>
				</TR>
				<TR>
					<TD>
						<asp:Button id="Button1" runat="server" Text="Add Numbers" OnClick="Button1_Click"></asp:Button>
					</TD>
					<TD>
					</TD>
				</TR>
			</TABLE>
		</form>
	</body>
</HTML>