Debugging a Windows Store App
I’m always optimistic and believe that any code that I write will run without error the first time that I run it. To date, that has never happened. I spend a significant amount of my time debugging code that does not do what I want it to do.
If you are building a Windows Store app, and the Windows Store app is behaving in ways that you don’t understand, then it is useful to set breakpoints and step through your code.
You set a breakpoint by clicking in the left gutter of the Visual Studio code editor next to the line that you want to break on (see Figure 1.28). When you run your app in debug mode, and the breakpoint is hit, you can examine the values of your variables by hovering over them with a mouse.
FIGURE 1.28 Setting a breakpoint
You can step through your code, line by line, by using the Step Into toolbar button or by pressing F11.
Using the DOM Explorer
Another of my favorite browser developer tools is the HTML inspector (this is a feature, for example, of Firebug). You can use this tool to view the live HTML and CSS in a document.
Visual Studio supports a similar tool named the DOM Explorer. You can use the DOM Explorer to inspect the property of any HTML element in a running Windows Store app.
After running a Windows store app in Visual Studio, you can view the DOM Explorer window by selecting the menu option Debug, Windows, DOM Explorer. Within the DOM Explorer window, you can click any element and view all of the properties of the element including information about all of the styles associated with the element (see Figure 1.29).
FIGURE 1.29 Using the DOM Explorer Window
If you click an element associated with a WinJS control then you can see all of the HTML attributes and elements rendered by the control. Adding a ListView control to a page, for example, adds a lot of new DIV elements to the page.