Jan 04

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

Posted in Windows8      Comments Off on 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:


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:


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:


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):


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:


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.