Debugging Tools in Visual Studio 2013 for Windows Store App (WinJS) Developers

There are plenty of useful tools within Microsoft Visual Studio 2013 that lets the developers to test and debug their Windows Store App developed using HTML , JavaScript and CSS (WinJS). In this blog post , I will try to cover 2 good tools in Visual Studio 2013 for Windows Store App which includes

1. Visual Studio 2013 Console Window

2. DOM Explorer

Visual Studio 2013 Console Window

If you are running a Windows Store App , you will generally not see the JavaScript console like the way you see when debugging web applications . Visual Studio 2013 provides a tool “Visual Studio 2013 Console Window” to view the javascript errors in the Console.

The Javascript console windows is displayed when the app runs . You can access the Javascript Console via the Menu Debug –> Windows –> JavaScript Console.

image

image

You can write debug messages to the Visual Studio 2013 Javascript console window using the console.log method .

image

If you want to find the value of the variable , you can dump the variable name to the console window as well.

DOM Explorer

Microsoft Visual Studio 2013 provides the DOM Explorer tool which lets the developers to inspect the property of any HTML element in the Windows App that is running. You can access the DOM Explorer Window via the menu Debug –> Windows –> DOM Explorer.

image

When the DOM Explorer Window is opened , you will be able to click on any element within the page and view its properties like style etc . If a WinJS control is used , you will also be able to see the HTML elements rendered by the WinJS control within the DOM explorer.

 

image

Leave a Reply