Debugging a Web Site with IntelliTrace: Part I

  • Article

This topic applies to Visual Studio 2010 Ultimate only.

In this scenario, you will learn how to use IntelliTrace to debug a Web site. You will use IntelliTrace with the default settings. With these settings, IntelliTrace has minimal effect on application performance. Therefore, IntelliTrace can be enabled at all times and ready when you need it.

Tip

You might also want to look at the more advanced scenario, Debugging a Web Site with IntelliTrace: Part II, which describes how to enable additional data collection for even more debugging power.

Although the Web application shown in this scenario is written in C#, the code is fairly simple. Visual Basic programmers with a basic reading knowledge of C# should have no trouble following along. If you would rather see scenarios that use Visual Basic code, see Debugging a Card Game with IntelliTrace: Part I and Debugging a Card Game with IntelliTrace: Part II.

Prerequisites

You can read this topic and understand its lessons without installing the sample application. If you want to see the complete code and perform the steps in this scenario for yourself, you can download a Training Kit that contains the Tailspin sample application. The Tailspin sample was still being refined at the time this scenario was written, so there might be some minor differences between the sample that you downloaded and what appears in this topic.

Because IntelliTrace is turned on by default in Visual Studio Ultimate, you do not have to adjust any settings to complete this walkthrough. The walkthrough is designed to work with the default IntelliTrace settings. However, the steps will still work if you have enabled additional settings.

Using IntelliTrace

Traditional debuggers show you the state of your application at the current moment. They provide limited information about events that occurred in the past. During debugging, you must infer events that have occurred in the past, based on the current state of your application, or restart your application and try to re-create those past events. If you view variables in the Locals window, for example, you see the variables as they exist at the current moment. If you want to see the Locals variable information from a previous call, you have to set a breakpoint on that call and restart the debugging session.

With IntelliTrace, you have access to debugging information that was collected at many points in time. You can "time travel" between various events that happened in the past, which eliminates the need to restart your application and set a breakpoint for many debugging problems. At each point in time, use the various debugger windows and drill down into debugging data.

Testing the Web site

  • In this scenario, you will debug a simple ecommerce site called Tailspin Toys. If you have downloaded the Tailspin VHD, you should now build the application and start to test the Web site.

    1. In Visual Studio, open TailspinToys.sln.

    2. On the Debug menu, click Start Debugging.

      The home page of the Tailspin Toys Web site appears.

    3. On the home page, move to the footer and click the About Us link.

      At this point, you would expect the About page to appear. Instead, an exception is thrown and an error page appears. This is the bug you will investigate in this example.

      Traditional debuggers provide limited tools for debugging an event such as this. With IntelliTrace, you can break execution and view events that have happened up to this point.

Breaking the application

  1. Locate the IntelliTrace window. In the default configuration, you will find this window docked with Solution Explorer.

  2. In the IntelliTrace window, click the Break All link.

    IntelliTrace Window

Debugging the Web site with IntelliTrace

  1. The IntelliTrace window now displays the IntelliTrace Events view. This view shows IntelliTrace events that are collected in the background while your application is being debugged. If you examine the IntelliTrace Events view, you will see several categories of IntelliTrace events that have been collected: Exceptions, ASP.NET events, ADO.NET events, and debugger events. This information is similar to information that is provided by tools such as SysInternals FileMon or RegMon, but with IntelliTrace, it is now available in Visual Studio. Notice the drop-down controls that you can use to filter the event list by category or thread, as well as the Search box where you can enter a text string.

    IntelliTrace Events View

  2. In the IntelliTrace window, IntelliTrace events are listed in chronological order, with the latest events on the bottom. Scroll up to locate the first Exception event. As you can see, it is an XML exception.

    IntelliTrace Events View

  3. Click the Exception Thrown event. This expands the event so that you can see more details.

    Exception Expanded

    Notice the Related views links. You can click the Locals or Call Stack link to view the local variables or the call stack at the time that the exception was thrown. Clicking the link syncs automatically to the Locals or Call Stack window.

  4. Click the Locals link.

  5. In the Locals window, expand the exception node and notice the information that is available:

    Exception Node in Locals Window

  6. Go back to the IntelliTrace window and click the XML: Loading Content\Xml\Ads.xml event node:

    XML Exception in IntelliTrace Window

    This event occurs immediately before the exception, so it is the likely cause.

  7. Notice the line that says "XML Document loaded from file: Content\Xml\Ads.xml". Click on the link to Content\Xml\Ads.xml.

    Visual Studio opens the Ads.xml file, if possible. Otherwise, a File Open dialog box appears.

  8. Use the File Open dialog box to locate and open the Ads.xml file.

    XML Source Window

  9. Look at the XML code. Notice the following line: <href>https://localhost/test.aspx?a=2&b=1</ href>

    You can see a red wavy mark under the "b" in "b=1". That mark indicates invalid XML code.

  10. To fix the bug, delete &b=1.

  11. You can now restart the Web application to verify the bug fix.

    You have just debugged a Web site by using IntelliTrace. This example shows how to use the default IntelliTrace settings. To debug more difficult problems, you may want to adjust the IntelliTrace settings to collect more call information as well as IntelliTrace events. For an example of how to use IntelliTrace with call information, see Debugging a Web Site with IntelliTrace: Part II.

See Also

Concepts

Debugging Code Faster with IntelliTrace