Debugging mobile web apps can be challenging for a couple of main reasons: (1) the screen size makes it difficult to integrate rich developer tools without killing the interface and (2) the tools are somewhat lacking. Recent developments with WebKit (for example) makes this a little easier. However, for the most part, it’s still challenging, especially when you’re trying to test on devices or through emulators. That’s why utilities like jsConsole exist. For those of you who haven’t heard about jsConsole or the man behind the tool – Remy Sharp (@rem) – then I suggest you check out the following video of him demonstrating this utility:
As with all tools/utilities, a word of warning from Remy:
Note that this technique is also injecting code directly in to your web app - this tool should only be used for debugging. I can’t take respibility for how you use this tool, basically: take care!
I tried jsConsole out earlier today with IE9 in the emulator for Windows Phone Mango and I’m happy to report that (1) it works and (2) it works quite well!
For what it’s worth, when things work this easily, my reaction can be best summed up by the following photo:
By the way, you can grab the (free) developer tools for Windows Phone Mango – which includes the emulator – from create.msdn.com. Ideally, this should be your homepage but if it’s not, bookmark it. And, if you targeting a mobile web browser and you’re looking to do a little debugging, check out jsConsole. Awesome stuff.