Remote debugging of flexible projects on mobile phones

Question

As responsive design and mobile web development are becoming the norm, like others that I suspect I find testing and bug fixing on a wide range of mobile and handheld devices. Traditionally, CSS errors with layout or presentation have been greatly simplified to fix using things like firebug or hrome dev tools. Even JavaScript errors can be matched and debugged in these tools.

However, the same errors are now much more difficult to isolate and correct. We no longer have an error console to see when JavaScript errors occur, we don't have an inspector (god, I'm sorry we didn't have remote debugging in all modern mobile browsers). Ive got an annoying error in Opera (which, as I know, can be remotely debugged: http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly ), and Ive allowed others in the Android browser and Safari for iOS through brute force rather than some real technique, but I'm just wondering what are the preferred tools, methods, and tips for debugging sensitive issues on mobile devices?

thanks

Answer 1

Have you looked in weinre ? gives you a (limited) remote web inspector (after some tweaking) - solved some real problems for me!

Answer 2

Opera Dragonfly (I have an obvious bias here ;-)) and the indispensable Microsoft Fiddler HTTP debugger , if your phone / device allows you to configure a proxy server. Fiddler helped me debug many problems before Dragonfly became powerful enough and still remains standby if I have problems with Dragonfly.

How do you solve annoying bug in Opera, BTW? :)

Answer 3

You can use the Chrome remote debugging feature on Android. For Android and iOS, you should take a look at Adobe Shadow , which also gives you a remote inspector.

And for iOS in the future: iOS 6 will have a built-in remote inspector, easily accessible from the Safari debug menu.

Answer 4

A good article here is also about how to use the Opera mobile emulator and the dragonfly remote debugger to debug Opera related errors ... http://mobile.smashingmagazine.com/2012/08/30/responsive-designs-opera-mobile- emulator /