14 Days Free Technical Video Training from WintellectNOW

  

Debug and run Windows Store JavaScript apps

Tags: JavaScript, WinJS, Metro, Windows 8

Once you have become familiar with WinJS app development basics, the next thing to do is run and debug your app, test it out, and see what the new IDE and tools can do. Debugging is a great way to manually verify the flow of your app, and when writing WinJS code, debugging sessions require the Windows Simulator (and of course, the built-in VS debugging tools).

Introducing the Windows Simulator

The Windows Simulator ships as part of Visual Studio 2012 on Windows 8. The Windows Simulator is a remote desktop session into your local machine, for the purpose of debugging apps and testing hardware features. Some features might not be available on your host development machine, such as an accelerometer, Geolocation, or touch screen, and debugging with the simulator allows you to test them anyway.

Being an RDP session is what makes it a simulator rather than an emulator. Additionally, changing operating system settings, or running code that modifies the OS in the simulator also modifies your host OS. Only one instance of the Simulator is allowed to run at a time, and multiple instances of Visual Studio and/or Blend for Visual Studio share the only instance of the Windows Simulator. This also means that you cannot run the Simulator inside the Simulator.

Because Windows Store apps run in immersive mode (full screen) or snapped view, it is difficult to debug them without a simulator, although multiple monitors can help make full screen debugging easier. Controlling suspend and resume events in the Simulator is far easier than when running in immersive mode.

The simulator lives at C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\Microsoft.Windows.Simulator.exe; however, it is part of Visual Studio so  you can access it from the standard toolbar.

image_thumb

The customary F5/Ctrl + F5 keyboard shortcuts map to whatever option (i.e., Simulator, Local, or Remote) you choose. Alternatively, you can access these same settings from the Debug->App Properties menu option.

The Simulator allows you to test hardware specific features by the many options on the toolbar located on its right side.

  image_thumb33

The Simulator’s toolbar, magnified with descriptions:

image_thumb32

There are many hardware specific features such as location, rotation, or touch, that are not available on many of today’s laptops/desktops, but you still need to ensure they work. The simulator is the best way to do so, short of owning one of every device known to earth (this also makes the Simulator cheaper). Of course, before deploying your app to the Window Store, be sure to test your app on as many physical devices as possible.

The DOM Explorer

Most of the popular web browsers contain debugging tools usually accessible via the F12 key. Web developers are accustomed to these tools for debugging, inspecting, and changing code during runtime. Since Windows Store apps are HTML5/JS apps, it is necessary to have comparable debugging tools available from within the Visual Studio IDE, and the DOM Explorer is one such tool.

The DOM Explorer allows you to inspect and modify the runtime DOM of your app. To open the DOM Explorer you must enter a debugging session then choose Debug->Windows->DOM Explorer

During a debugging session, the DOM Explorer shows the runtime DOM in the left side pane, and the options for the selected DOM node(s) on the right: Style, Trace Styles, Layout, Attributes, and Events. The Layout tab is great for defining the CSS Box Model, while Style & Trace Styles tabs are for DOM inspection

image51_thumb1

Trace & Style tabs list styles for the selected node(s) in order of specificity. This means the styles listed toward the bottom of the window are the most specific. Changes you make in the DOM Explorer are reflected immediately in the Simulator; however, keep in mind these are runtime changes that will not affect source code. This article on CSS inspection contains complete details about each DOM explorer tab.

JavaScript Console Window

In the JavaScript console window you can test out single or multiple lines of code, and respond to errors, warnings, and messages. Since JavaScript is interpreted, you can modify code during runtime. Beware of trying to run statements like eval() because WinJS apps run in Strict Mode, a new language element standard in ECMAScript 5[1].

image_thumb24

Whether debugging in the JS console or writing WinJS code in VS, try to avoid these common JavaScript mistakes, and save yourself time and frustration. Other time saving debugging tools are familiar to Visual Studio developer: Locals, Call Stack, Watch, etc.…

Other Visual Studio 2012 Debugging Windows

The standard issue debugging tools accessible through the Debug menu (while in debug mode) are available for developing JavaScript apps. The Locals window in particular is quite useful, as you can inspect local variables as you might expect but you can also inspect the Global namespace, making Locals a nice one-stop-shop for object information.

image_thumb2

Don’t forget about the other windows available for JavaScript debugging – Autos, Watch, etc...

Summary

The Windows Simulator is part of the overall debugging experience for building Windows Store apps. The Simulator compliments debugging tools that ship with Visual Studio such as the DOM Explorer and JavaScript console. These are excellent tools; however, keep in mind that using a debugger does not replace the value of unit testing, and unit testing in WinJS apps requires a framework, such as QUnitMetro.

Links:

Guide to emulators for mobile development

VS Team: First look at the Simulator

VS Team: Windows Simulator touch

[1] Don’t be lazy. Keep Strict Mode enabled, it keeps you away from a lot of trouble.

6 Comments

  • Mubasher said

    Hi Rachel Appel your Information to nice but if you have any book related Metro Styles App with java Script and C#.net then please send me thanks...

  • Rachel said

    Mubasjher,

    Thanks. Here's a selection of free eBooks (one is for Metro)
    http://blogs.msdn.com/b/microsoft_press/archive/2012/05/04/free-ebooks-great-content-from-microsoft-press-that-won-t-cost-you-a-penny.aspx

  • Jason Nunez said

    You made some decent points there. I looked on the internet for the issue and found most individuals will go along with with your website.

  • Jules said

    The VS Windows 8 Simulator does not support Tilt and orientations, so we cannot test Accelerometer sensor based Apps.

    That is just plain dumb. As the VS Windows Phone Emulators support Tilt, but the Windows 8 Tablet simulator doesn't. How stupid is that !

  • Rachel said

    Jules,

    If you look at the "rotate" options you will see it does support orientations. The Win8 sim & WP em are simply different pieces of software built by different teams during different times so there will be some features in one and not the other.

Comments have been disabled for this content.