Debugging Tips for JavaScript-based Windows Phone Apps

Introduction

One of the cool things about the latest version of Visual Studio is that it brings all of its features almost equally to all the platforms it supports. That means, the rich debugging experience that developers have come to love and appreciate for XAML-based Windows and Windows Phone applications also applies for JavaScript-based Windows and Windows Phone applications. Although the platforms are different, Microsoft’s commitment to web developers shows in the forms of various debugging features they offer in Visual Studio 2013 for JavaScript-based applications.

One of the new things in Visual Studio 2013 is support to debug the entire web client stack on the Windows Phone. This also extends to Windows Store applications based on JavaScript. Let us take a look at what these toolsets are and how to use them.

Viewing the DOM by Using the DOM Explorer

Any web developer can vouch to the pain it takes to understand the DOM of any web page. Visual Studio 2013 offers the “DOM Explorer” that can be used during a live debugging session. For JavaScript-based applications, the DOM explorer is automatically invoked when the debugging session is started in Visual Studio 2013.

The DOM Explorer window looks like what you see in Figure 1.

DebugPhone01
Figure 1: The DOM Explorer window

If you accidentally close the DOM Explorer window, you can bring it back by going to Debug -> Windows -> DOM Explorer -> Show All.

DebugPhone03
Figure 2: Choosing DOM Explorer -> Show All

We can see that the DOM Explorer window shows five tabs on the right side: Styles, Computed, Layout, Events, and Changes.

DebugPhone05
Figure 3: Viewing the DOM Explorer window with its five tabs

We can use DOM Explorer to navigate the DOM element sub tree and inspect the rendered HTML, CSS, and JavaScript. When we click any DOM element, you will be presented with a view such as seen in Figure 4.

DebugPhone07
Figure 4: Viewing a DOM element

Understanding Property Calculation by Using the Computed Tab

You can understand how the properties for an attribute are computed by looking at the Computed tab, shown in Figure 5.

DebugPhone09
Figure 5: Looking at the Computed tab

The Computed Tab represents the final values of the attributes, so if something is not rendering correctly, we can see the deviation here.

To dive deeper into why the value is computed as shown in the Computed tab, you can click the Down arrow next to the property name to expand and display the calculation used. Figure 6 shows how the color property was calculated.

DebugPhone11
Figure 6: The color property being calculated

We can see it was defined in the ui-dark.css file and, because there were no overrides, it picked up the value defined in ui-dark.css.

Refreshing the App During a Live Debugging Session

Besides diagnosing property value calculations, the DOM Explorer also can be used to instantly update a property value and see the impact to the application before making changes in the code. All this can happen in a live debugging session.

To change a property in a live debugging session, go to the HTML file for the code, make the changes, and click Debug -> Refresh Windows App. This will refresh the application without needing to restart the debugging session.

The JavaScript Console

In addition to the above-mentioned features, Visual Studio 2013 also offers the JavaScript Console, which can be used to send messages. If the JavaScript Console is accidently closed during a debugging session, you can get it back by going to Debug -> Windows -> JavaScript Console.

DebugPhone13
Figure 7: Opening the JavaScript Console

The JavaScript Console looks like that shown in Figure 8.

DebugPhone15
Figure 8: The JavaScript Console

All the JavaScript commands are documented at http://msdn.microsoft.com/en-us/library/windows/apps/hh696634.aspx. In particular, assert(), count(title), debug(message), and select(element) are commands of web interest to web developers.

Summary

In the above section, we looked at some tips to use Visual Studio 2013 to effectively debug JavaScript-based Windows and Windows Phone applications. I hope you have found this information useful.

About the Author

Vipul Patel is a technology geek based in Seattle. He can be reached at vipul.patel@hotmail.com. You can visit his LinkedIn profile at https://www.linkedin.com/pub/vipul-patel/6/675/508.

More by Author

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Must Read