This chapter is from the book
This chapter is from the book
This chapter is from the book
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.
In this section, I discuss the tools in Visual Studio that you can use to debug your code. I discuss how you can use the JavaScript Console window, use breakpoints, and use the DOM Explorer.
Using the Visual Studio JavaScript Console Window
When I write JavaScript code for pages used in websites, I use the JavaScript console window to view JavaScript errors. I also write custom messages to the console window using console.log() so I can debug my code. (See Figure 1.25.)
)
FIGURE 1.25 Debugging with the Google Chrome JavaScript console
When running a Windows Store app, you don’t have access to the browser JavaScript console. Instead of using the browser JavaScript console, you need to use the Visual Studio JavaScript Console (see Figure 1.26).
)
FIGURE 1.26 The Visual Studio JavaScript Console Window
You can view JavaScript errors and write debug messages to the Visual Studio JavaScript console window by using console.log() in exactly the same way as you would write to a browser console window.
If you hit an error and you want to display the value of a JavaScript variable then you can enter the variable name in the bottom of the JavaScript Console (see Figure 1.27).
)
FIGURE 1.27 Dumping a JavaScript variable to the JavaScript Console window
Setting Breakpoints
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.