Windows 8 Adventures: Oh my god, it’s so easy to debug JavaScript apps!

After installing the Windows 8 Developer Preview With Developer Tools, I’ve finally managed to debug my JavaScript applications. Hurray and hurrah!!! And I must confess that the experience is really good!

Even though I’ve been using Windows 8 for some time now, the truth is that the Widows 8 Developer Preview version I’ve decided to install at the time didn’t allow me to build Metro Style apps nor to debug existing applications (btw, I’ve decided to go with that version because it was the only one which allowed me to upgrade from Windows 7 and, at the time, the page didn’t mention that you could only only build Metro style apps from the Developer Tools version).

Back to business: so, what do we get when we debug a Windows 8 Metro JavaScript app? We get *all* the goodies we’re used to when debugging HTML+JS pages. Ok, here’s a screen capture which shows VS2011 running a debug session:

debugging

As you’d expect, you can add breakpoints to your JavaScript code and you can check the values of your objects by looking at the traditional watch and locals windows. You can also navigate through the current stack trace (and this means you inspect the Win RT JS code which ends up calling your functions). JavaScript developers will also notice the existence of the console window, which allows you to inspect your code or run JavaScript code.

Even more interesting is the DOM Explorer window (which you can see in the first tab). The next image shows that window in detail:

domexplorer

Yep, you have total access to the DOM used by your Win 8 Metro JavaScript! You can see the styles which have been applied to an element and you can even change them. If you’ve got a dual monitor system, you can even see where each HTML element is on your app’s UI:

all

This should be a really huge help for building those nasty layouts. Btw, if you’re building an app for several devices, then you’ll probably be happy to know that you can use the simulator. To use the simulator, you must change the default properties of your project (to access the dialog, right click your project in Solution Explorer and choose the properties option):

simulator

After setting the debugger to launch dropdown to Simulator, you can simply hit F5 and you’ll end up with the simulator. Even though the simulator takes some time to start, it’s well worth it because you’ll end up with an environment where you can change the current screen resolution, change the way you interact with the app (mouse vs. touch) or even change the current orientation of your screen:

simulator2

This should be really useful for everyone who needs to build an app for several devices and is stuck with a PC (like me!).

And that’s it for now. Stay tuned for more.

Advertisements

~ by Luis Abreu on January 4, 2012.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: