In this exercise, you will learn how to use IntelliTrace to collect additional call information in order to solve a more complicated user code error.
By default, only IntelliTrace events are collected when debugging, but we can also opt to collect data at every method enter/exit and call site. To enable this, select Tools | Options from the main menu in Visual Studio, locate the IntelliTrace node, and select the “IntelliTrace events and call information” option.
Figure 1
IntelliTrace options adjusted to record call information
- Select the OK button to continue.
- Start a debugging session by pressing F5.
Let’s test out the shopping cart functionality by adding a couple of products to the cart. Select the “Paper Airplanes” header to see a catalog of planes.
Figure 2
Catalog of paper airplanes
Next, select the “View Plane” button for the Contoso Cloud Explorer.
Figure 3
Contoso Cloud Explorer product page
Select the “Add To Cart” button and verify that the Quantity of the item in the cart is 1.
Figure 4
Shopping cart showing 1 airplane
- Add another “Contoso Cloud Explorer” to the shopping cart by selecting the “Contoso Cloud Explorer” link and selecting the “Add To Cart” button once again. Note that the Quantity value is still 1 even though we added 2 products.
- Return to Visual Studio and select Debug | Break All. By default, we see the IntelliTrace Events window showing the sequence of recorded events leading up to the debugger break. In this case, however, the events will not be of much use in debugging the Tailspin Toys shopping cart logic sine this code is not part of the .NET framework.
- In the search box at the top of the IntelliTrace window, type “post” and press Enter to conduct a search. This will return two “Post” events, one for each shopping cart item added.
Select the second “Post /Cart/AddItem/” event. We will use this as a reference point to aid in navigating to the point in the debugging session where the Add Item logic begins.
Figure 5
Second ASP.NET POST event selected
- Return to the full list of recorded events by clicking the blue “X” to the right of the search box.
Select the “Calls View” link at the bottom of the selected event to show a complete call hierarchy of the debugging session. The top frame of the calls view shows the stack for the currently selected call.
You can also use the “Show Calls View” button at the top of the IntelliTrace window.
Figure 6
Location of “Calls View” link
Figure 7
IntelliTrace calls view
- In the IntelliTrace calls view, double-click on the call “Tailspin.Web.App.Controllers.CartController.AddItem(string sku = “papcce”)”. Each time you double-click on a call in the bottom half of the calls view, the call is popped to the bottom of the top frame and the Instruction Pointer syncs in the code editor to the method entry point of the call just like in live debugging when you walk up the stack.
- In the IntelliTrace calls view, double-click on the call “Tailspin.Model.ShoppingCart.AddItem(Tailspin.Model.Product produt = {Tailspin.Model.Product})”.
- In the IntelliTrace calls view, double-click on the call to AddItem that shows “Tailspin.Model.Product product = {Tailspin.Model.Product}, int quantity = 1)” as the parameter.
In the IntelliTrace calls view, double-click on the call to AddItem that shows “Tailspin.Model.Product product = {Tailspin.Model.Product}, int quantity = 1, System.DateTime dateAdded = …)” as the parameter. Navigating through the calls view is a quick way to gain an overview of the call hierarchy and to make large jumps across the call hierarchy without stepping through line by line.
Figure 8
IntelliTrace calls view showing call to AddItem method
In the Locals window, expand the “AddItem” function call to validate that the correct product was being added to the cart and that the quantity being added was 1. At any point in IntelliTrace debugging, you can look at the collected variables in the Autos/Locals/Watch window or by using the datatips in the editor.
Figure 9
Locals window showing parameters during call to AddItem
Step forward two calls by pressing F10 twice. Keep in mind that since we are in IntelliTrace debugging mode, we are stepping through recorded events and call sites, not line by line of code.
Figure 10
Location in AddItem method where AdjustQuantity is called
You can also use the new set of “VCR” style controls shown in the gutter of the source code window.
- In the Locals window, expand the “AdjustQuantity” function call to see what quantity the cart is being set to after adding the second product. Since we are expecting the adjusted quantity to be 2, we have found the location of the bug.
- Stop the current debugging session (Debug | Stop Debugging).
Change the AdjustQuantity(…) call so that it adds in the new quantity passed to the AddItem method.
Figure 11
Fixed call to AdjustQuantity method
Verify the fix by adding the same product twice to ensure that the shopping cart quantity shows the value 2.
Figure 12
Shopping cart showing correct quantity of product items
You can clear out the current shopping cart by manually removing items or by selecting Safety | Delete Browsing History from the main menu in Internet Explorer.
To give feedback please write to VSKitFdbk@Microsoft.com
Copyright © 2010 by Microsoft Corporation. All rights reserved.