Walkthrough: Debugging Web Pages in Visual Web Developer

Article
11/16/2012

Visual Web Developer provides you with tools to help track down errors in your ASP.NET Web pages. In this walkthrough, you will work with the debugger, which allows you to step through the page's code line by line and examine the values of variables.

In the walkthrough, you will create a Web page that contains a simple calculator that squares a number. After creating the page (which will include a deliberate error), you will use the debugger to examine the page as it is running.

Tasks illustrated in this walkthrough include:

Setting breakpoints.
Invoking debugger from a Web Forms page in a file system Web site.

Prerequisites

In order to complete this walkthrough, you will need:

Visual Web Developer and the .NET Framework.

You should also have a general understanding of working in Visual Web Developer. For an introduction to Visual Web Developer, see Walkthrough: Creating a Basic Web Page in Visual Web Developer.

Creating the Web Site and Page

In the first part of the walkthrough, you will create a page that you can debug.

If you have already created a Web site in Visual Web Developer (for example, by working with the topic Walkthrough: Creating a Basic Web Page in Visual Web Developer ), you can use that Web site and skip to "Adding Controls to Debug" later in this walkthrough. Otherwise, create a new Web site and page by following these steps.

To create a file system Web site

Open Visual Web Developer.
On the File menu, click NewWeb Site.

The New Web Site dialog box appears.
Under Visual Studio installed templates, click ASP.NET Web Site.
In the Location box, click File System and then type the name of the folder where you want to keep the pages of your Web site.

For example, type the folder name C:\WebSites.
In the Language list, click the programming language that you prefer to work in.

The programming language you choose will be the default for your Web site. However, you can use multiple languages in the same Web application by creating pages and components in different programming languages. For information on creating components using different languages, see Shared Code Folders in ASP.NET Web Sites.
Click OK.

Visual Web Developer creates the folder and a new page named Default.aspx.

Creating a Page to Debug

You will begin by creating a new page. For this walkthrough, it is important that you create a new page as specified in the following procedure.

To add a page to the Web site

Close the Default.aspx page.
In Solution Explorer, right-click the name of your Web site (for example, C:\WebSite) and choose Add New Item.
Under Visual Studio installed templates, choose Web Form.
In the Name box, type DebugPage.aspx.
From the Language list, choose the programming language you prefer to use.
Be sure that the Place code in separate file check box is cleared.

In this walkthrough, you are creating a single-file page with the code and HTML in the same page. The code for ASP.NET pages can be located either in the page or in a separate class file. To learn more about keeping the code in a separate file, see Walkthrough: Creating a Basic Web Page with Code Separation in Visual Web Developer .
Click Add.

Visual Web Developer creates the new page and opens it in Source view.

You can now add some controls to the page and then add code. The code will be simple, but enough to allow you to add breakpoints later.

To add controls and code for debugging

Switch to Design view, and then from the Standard folder of the Toolbox, drag the following controls onto the page and set their properties as indicated:

Control

Properties

Label

ID: CaptionLabel

Text: (empty)

TextBox

ID: NumberTextBox

Text: (empty)

Button

ID: SquareButton

Text: Square

Label

ID: ResultLabel

Text: (empty)

Note

For this walkthrough, the layout of the page is not important.
Double-click the Button control to create a Click handler for it.

Control	Properties
Label	ID: CaptionLabel Text: (empty)
TextBox	ID: NumberTextBox Text: (empty)
Button	ID: SquareButton Text: Square
Label	ID: ResultLabel Text: (empty)

Add logic to the Click handler to call a function called Square to square the number entered by the user. The handler might look like the following example.

Note

The code example deliberately does not include error checking.

Sub SquareButton_Click(ByVal sender As Object, _
    ByVal e As System.EventArgs)
    Dim number As Integer
    Dim result As Integer
    number = CInt(NumberTextBox.Text)
    result = Square(number)
    ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
End Sub

protected void SquareButton_Click(object sender, System.EventArgs e)
{
    int number, result; 
    number = System.Convert.ToInt32(NumberTextBox.Text);
    result = Square(number);
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
}

Create the function that squares the number. Include a bug in the code to add the number to itself instead of multiplying it. The code might look like the following example.

Function Square(number As Integer) As Integer
    Square = number + number
End Function

int Square(int number )
{    
    int Square;
    Square = number + number;
    return Square;
}

You can also add code to the page that will change the text of the label depending on whether this is the first time the page is running.

To change the caption Label control

In Design view, double-click the design surface (not a control) to create a Page_Load event handler.

Set the text of the Caption Label control to Enter a number: if this is the first time the page is running, or Enter another number: otherwise. The handler will look like the following code example.

Sub Page_Load(ByVal sender As Object, ByVal e as System.EventArgs)
    If Page.IsPostBack = False Then
        CaptionLabel.Text = "Enter a number: "
    Else
        CaptionLabel.Text = "Enter another number: "
    End If
End Sub

if(Page.IsPostBack == false)
{
    CaptionLabel.Text = "Enter a number: ";
}
else {
    CaptionLabel.Text = "Enter another number: " ;
}

Testing the Page

To make sure the page is working, run it in its current state.

To run the page

Save the page.
Press CTRL+F5 to run the page.
Enter the number 3 and press the Square button.

Note that the result is incorrect, because there is a bug in the program. The correct result is 9.
Close the browser.

Debugging the Page

In this part of the walkthrough, you will use the debugger to examine the page code line by line as it is running, add breakpoints to the code, and then run the page in Debug mode.

You will start by setting breakpoints in your code. A breakpoint is a line in your code where execution stops and the debugger is invoked.

To set breakpoints

Switch to Source view.
Right-click the following line, choose Breakpoint, and then choose Insert Breakpoint.

Note

You can toggle breakpoints by pressing F9.
```
If Page.IsPostBack = False Then
```
```
if(Page.IsPostBack == false)
```
Set another breakpoint on the following line of the SquareButton_Click handler:
```
result = Square(number)
```
```
result = Square(number);
```
Note

You cannot set a breakpoint on a statement that declares a variable.

With at least one breakpoint set, you are ready to run the debugger.

To run the debugger

From the Debug menu, choose Start Debugging (or press F5) to run the page in debug mode.

If you have never run the debugger before, your application probably is not configured to support debugging. By default, debugging is turned off in applications both for performance (pages run more slowly in the debugger) and for security reasons. Visual Web Developer displays a message telling you what it must do to enabled debugging.

The switch to enable debugging is stored as a setting in the Web.config file, which maintains various site-specific configuration options. If the Web.config file does not exist, Visual Web Developer will both create the file and make the appropriate debugger setting.

If the Web.config file already exists but debugging is not enabled, you will see a slightly different message telling you that Visual Web Developer will modify the Web.config file.
If you see the message telling you that debugging has not been enabled, click OK to enable debugging.

In Visual Web Developer, the designer changes to debug mode displaying the code for your page and some debugger windows.

The debugger runs your page line by line. When the debugger gets to the line with the breakpoint, it stops and highlights the line.

Because the breakpoint is in the Page_Load handler, the page has not finished processing yet. The browser is open, but the page is not yet displayed.
In the Debug menu, click Windows, click Watch, and then click Watch 1.

Note

If you are using Visual Web Developer Express Edition, the debugger offers only a single Watch window.

This opens a Watch window, where you can specify the values you want to track.
In the editor, right-click the IsPostBack portion of the Page.IsPostBack expression, and then clickAdd Watch.

This adds the expression to the Watch window and displays the current value of the property (false) is displayed in the Value column. If you prefer, you can type the name of a variable or property in the Name column of the Watch window.
From the Debug menu, choose Continue to continue execution, or press F5.

The Continue command tells the debugger to proceed until it gets to the next breakpoint. The Page_Load event handler finishes processing and the page is displayed in the browser.
Enter the value 2 into the text box and click the Square button.

The debugger is displayed again, with the breakpoint on the line in the Page_Load handler. This time, the Watch window shows you that the value of Page.IsPostBack is true.
Press F5 again to continue.

The debugger processes the Page_Load handler and enters the SquareButton_Click handler, where it stops on the second breakpoint you set.
In the Debug menu, click Windows and then click Locals.

This opens the Locals window, which displays the values of all variables and objects that are in scope at the current line being executed. The Locals window provides an alternative way for you to view these values, with the advantage that you do not have to explicitly set a watch on the elements, but with the disadvantage that the window might contain more information than you want to see at once.

In the Locals window, you see that the value of number is 2 and the value of result is 0.

Note

You can also see the value of any variable in the program by holding the mouse pointer over it.
In the Value column of the Locals window, right-click the line for the number variable and select Edit value. Edit the value of the number variable and change it to 5.

The value 2 for the variable number is not a good test of the program, because adding and squaring 2 both result in 4. Therefore, while the program is running, you can change the value of this variable.
From the Debug menu, choose Step Into to step into the Square function, or press F11.

The Step Into command causes the debugger to execute a line and then stop again.
Continue stepping by pressing F11 until you reach the following line of code.
```
ResultLabel.Text = CStr(number) & " squared is " & CStr(result)
```
```
    ResultLabel.Text = NumberTextBox.Text + 
        " squared is " + result.ToString();
```
The debugger walks through your code line by line. When the debugger executes the Square function, you can use the Locals window to check the data passed to the function (number) and the return value of the function (Square).
In the Debug menu, click Windows and then Immediate.

The Immediate window allows you to execute commands. You can use the window to evaluate expressions (for example, to get the value of a property).
In the Immediate window, type the following expression and press Enter.
```
? NumberTextBox.Text
```
The question mark (?) is an operator in the Immediate window that evaluates the expression following it. In this example, you are evaluating the Text property of the NumberTextBox control on the page. You can evaluate any variable, object property, or expression that combine these, using the same syntax that you would use in code.
In the Immediate window, type the following and press Enter:
```
NumberTextBox.Text = "5"
```
In addition to evaluating expressions, the Immediate window allows you to change variables or properties
Press F5 to continue running the program.

When the page appears, it displays the result of passing 5 to the Square function. In addition, the text in the text box has been changed to 5.

The result you see — 10 — is not correct, since 10 is not the square of 5. You can now fix the bug.

To fix the bug and test again

Switch from the browser to Visual Web Developer.

Note

Do not close the browser window.
In the Square function, change the "+" operator to the "*" operator.

Because the code is not currently running (the page has finished processing), you are in edit mode and can make permanent changes.
Press CTRL+S to save the page.
From the Debug menu, choose Delete All Breakpoints so that the page will not stop each time you run it.

Note

You can also clear breakpoints by pressing CTRL+SHIFT+F9.
Switch to the browser window.
Enter 5 in the text box and click the button.

This time, when you run the page and enter a value, it is squared correctly. The temporary changes you made earlier, such as changing the Text property of the NumberTextBox control, have not been persisted, because they applied only when the page was running the last time.
Close the browser to stop the debugger.

Next Steps

The debugger includes additional features to help you work with your code. In addition, you might want to learn about techniques for handling error conditions and ways in which you can monitor page processing at run time. For example, you might want to explore tracing. For details, see Walkthrough: Using Tracing in Visual Web Developer to Help Find Web Page Errors.

Share via