Continuing with Part 3 of building Metro-style applications with HTML and JavaScript.  You can find earlier installments at their respective links: Part 1 – Part 2

Watch the Part 3 video

In all honest, the video is easier to follow than this blog post.  But for those of you, like me, that like reading as opposed to watching, here is a quick summary of the video.

When debugging a Windows 8 Metro application, you are not limited to running and debugging the app on your local machine.  If you look closely, you will see that the toolbar button that says “Local Machine” by default (the button with the green arrow) can also act as a drop down.  This drop down allows you to select different targets to deploy and debug your application.  Perhaps in a future blog post I will over the “Remote Machine” option, but for now, let’s click the drop down and set it to “Simulator”.

When you run an application in the Simulator, Visual Studio will actually start an RDP session back into your desktop and start a new instance of your environment.  VS then deploys your application into this environment and allows you to interact with the application just as if it were running on a touch-enabled piece of hardware.

The real power of the Simulator comes from the toolbar along the edge.  It allows you to change the resolution of the simulator so you can see how your app would look on a large, high resolution monitor.  You can rotate the Simulator to observe how your application will lay itself out in portrait or landscape.  You can also have the mouse pointer act as a finger(s) to simulate swipe gestures, pinch and zoom, etc.  All in all, a very handy way to test your application without needing gobs of hardware.

There are two other useful features, that while not limited to the Simulator (you can use them anytime, it just is easier with the Simulator unless you have dual monitors).  The first is the DOM Explorer and its Select Element feature.  The second is the JavaScript Console window.

The DOM Explorer allows you to see the markup that is currently being displayed in your application.  You can examine what styles are applied, how the element is being laid out, etc.  You can also update style properties and see how they would change the look of your application.  Using the TweetScan sample app, find where the #target style sets the default font-style to italic and change it to empty/none.  Instantly the tweets that are displayed (assuming you have clicked the button) will change their text from italic to normal.

What is really powerful is the Select Element button in the upper left hand corner.  By clicking this button, then selecting any element inside the Simulator (you will see elements get highlighted with a bounding box prior to selection to help you pick the correct element) and you will immediately be taken to that element in the DOM and see its associated styles, layout, etc.

While you have an application running in Debug mode, you will see a JavaScript Console window open up in Visual Studio.  The JavaScript Console window allows you to dynamically interact with your application just by typing JavaScript into the console.  Want to change a variable, change it.  Want to inspect an object?  Type the name of the object and see it displayed in the output window.  You can even add and execute code.  For example, type the following code into the JavaScript console.  By default, the JavaScript console runs in single-line mode, meaning you will need to hit Enter after type each line.

var dlg = new Windows.UI.Popups.MessageDialog('test');
dlg.showAsync();

Now take a look at the Simulator.  Pretty cool.  Switch back to Visual Studio and notice how the dlg object is displayed in the console window, allowing you to inspect it in more detail.

Until next time…