Debugging with "Stepping" and "Data Viewing" features

Revision

In debugging with breakpoints in ASP.NET, we presented 'Breakpoints' as a feature that you can use to debug your application among another two features the integrated debugger provides. In this part of the tutorial, we are going to presents the other two features. These features are 'Stepping', and 'Data Viewing'.

Note: We will use the same source code example as the one used in last tutorial. You can download this example here.

Before We Begin

Before we present 'Stepping' to you, there is some code you need to add to the example.

Open the example you created in Part1 in visual studio 2005, then add the following bold face lines of code.


    5     Protected Sub Button1_Click(ByVal sender As Object, _
    6      ByVal e As System.EventArgs) Handles Button1.Click
    7 
    8         Dim str As String
    9         Dim i As Integer
   10 
   11         If TextBox1.Text Is Nothing Then
   12             Label1.Text = "Please, enter your name. "
   13             Return
   14         End If
   15 
   16         str = TextBox1.Text
   17         AddToSession(str)
   18         i = str.Length
   19         Label1.Text = "Hello " + str
   20 
   21     End Sub
   22     Private Sub AddToSession(ByVal str As String)
   23         str.Trim()
   24         Session.Add("Name", str)
   25     End Sub

In the above code, we introduced a new subroutine to our class. We then called this subroutine from within our button click handler. Now add a new breakpoint at line 16 of the pervious code, and then run your application. Enter a name in the text box, then press the button. Now you are in the 'Break Mode', and you are at line 16.

Stepping

Once you stopped your application at a given point, you can step through your code line by line, that is, executing your code line by line. The integrated debugger provides you with a number of features to help you step through your code.

There are three commands you can use for stepping through code. These commands are:

Step Into
Step Over
Step Out

Step Into

This command is to give you the ability to walk through your code while you are in the break mode. After stopping at a breakpoint line, you certainly need to go to the next line, and the line next to the next line and so on. By pressing F11 (or clicking 'Debug / Step Into') that executes the step into command you can do so.

Now, back to our web application, and while it is in the break mode stopping at line 16 press F11. As you can see, the highlighting indicator moved to the next line, indicating that the pervious line was executed and now the turn is on the current line (line 17) to be executed.

Figure 1

Now, press F11 again. As you can see, the highlighting indicator moved to line 22!!

Why? Why 22 not just 18?

This is because that line 17 is a function call, which must be carried on, and this means that executing the function as a whole and then then executing the line next to the function call.

Figure 2

Press F11 again, and the highlighting indicator will move to the next line in the function call, which is line number 23.

Figure 3

Press F11 two more times until you get to line 25.

Figure 4

Now, if you press F11 again your will be moved back directly to line number 17 again, which is the function call as shown in figure 1 above.

Why going to line 17 again, why not 18?

This happened to execute the line number 17 itself. When the highlighting indicator moved to line 17 at the first time, then we pressed F11, at this step all what we did was executing the function call itself, not the entire line of code numbered 17.

In our case, line 17 contains nothing more a function call, but in another case it may contain an assignment statement with a function call at its right side. In this case the first F11 calls the function at the right hand side of the assignment statement, and the other F11 executes the assignment statement itself.

You can now press F11 till you finish executing the function we are already inside and monitor the results.

Figure 5

Step Over

You can step over your line by pressing F10, or by clicking 'Debug / Step Over' from the main menu. Step over is just like step into, but it differ in only one aspect, which is the way it handle a function call.

When we have a function call, step into will move us inside the function code line by line, which means executing the function call line by line. When we use step over, the function will be executed as a whole without the need to step through its lines line by line. The highlighting indicator will then move to the next line.

To just examine this ourselves, close your application, then re-run it again. This time instead of using F11 to step through your lines, use F10. When you are at line 17, press F10 and you will get directly to line 18 (contrast this with line 22 in the case of 'Step Into'). This is called a 'step over', which means that the debugger will step over the function and executes it as a whole and return the result to you.

Step Out

Step out is used when you are inside a function and want to go directly to the point from which the function was called without completing stepping (into) to the end of function.

In our small program, delete the breakpoint located at line 16, and add a new one at line 23, which is the first line inside the 'AddToSession' function.

Figure 6

Now run the application...

As you expected, the debugger halts execution at line 23. Now press Shift+F11, or click 'Debug / Step Out' from the main menu. The debugger highlighting indicator moved directly to line number 17, which is the line that contains a call to the function we were inside!. That is what the 'Step Out' command do. See figure 1.

Data Viewing

The integrated debugger provides you with many different tools that you can use to view and track data while debugging. It also gives you the ability to edit your data values while you are in break mode. You can then complete the debugging process depending on the new modified values. Most of these tools function properly only in break mode.

Before we begin, please remove the breakpoint from line 23 and add a new one at line 16, then run the application again.

Data Tips:

You can watch the current value of a variable by simply placing your mouse pointer over it. An example for this behavior can be seen in figure 7. You can also change its value by right clicking the data tip. You will need to choose 'Edit Value' from the shortcut menu to achieve this. Type the new value then press enter.

Figure 7

Visualizers:

You can also view the value of a selected variable using one of the available visualizers as shown in figure 8.

Figure 8

A Visualizer gives you a more meaningful way to display your data depending in its type. For example, in an HTML visualizer, in which you can display html text, the result text will appear as it would be in the browser window. Another example is the bitmap visualizer in which the bitmap structure will be displayed in its graphical representation (i.e., it will be displayed as an image).

The visual studio debugger comes with four standard visualizers. These are the xml, the text, the html, and the dataset visualizers. You can display the available visualizers for any variable by simply clicking the magnifying glass icon in the data tip of this specific variable.

Variable Windows:

The integrated debugger also provides a number of windows to display and edit your application's variables and expressions. These windows are:

Locals Window
Autos Window
Watch Window

Each window has three columns: 'Name', 'Value', and 'Type'. In the 'Locals' window you can watch the variables inside your current scope. For example, when you are inside a function or a sub. The entries inside this window are created automatically by the debugger. You can view this window by clicking 'Debug / Windows / Locals'.

The entries inside the 'Autos' window is also created automatically by the debugger. Use this window to view the variables inside the current line of code, and the line above it. You can display this window by clicking 'Debug / Windows / Autos'.

The 'Watch' window is the window you can use to watch certain variables or expressions. You can add the variable or expressions you want to watch by positioning your mouse pointer over it, then click the right mouse button and choosing 'Add Watch' from the pop up menu. You can add more than one variable. You can view the 'Watch' window by clicking 'Debug / Windows / Watch1'. The debugger also provides you with additional three watch windows that you can choose from.

You can view all the above types of windows at the same time in a tabbed window, and you can move from one to the other by clicking the window's tab. In all of the above types of windows, you can edit the value of the displayed variable by double clicking the value itself, or by pointing to the variable name and clicking the right mouse button and choosing 'Edit Value' from the pop up menu.

For more clarity, see figure 9 which shows the 'Locals', the 'Autos', and the 'Watch' windows.

Figure 9

For further information

Refer to the online copy of Microsoft Developers Network at http://msdn.microsoft.com or use your own local copy of MSDN.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback