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.
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.
var dlg = new Windows.UI.Popups.MessageDialog('test');
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…