CODEWITHSUNDEEP
androidiosfirebugoperaresponsive-design
LDJ
LDJ

Reputation: 7304

Remotely debugging responsive designs on mobile handsets

As responsive design and mobile web development become the norm, like others I suspect, I find myself testing and bug fixing on a wide range of mobile and handheld devices. Traditionally, errors in the CSS with layout or presentation were made substantially easier to fix using things like firebug or the chrome dev tools. Even JavaScript errors could be picked up and debugged in these tools.

However, the same sorts of errors are now significantly more difficult to isolate and fix. We no longer have the error console to see when JavaScript errors occur, we don’t have an inspector (god, I wish we had remote debugging on all modern mobile browsers). I’ve got an annoying bug in Opera (which I know can be remotely debugged: http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly) and I’ve resolved others in the Android browser and Safari for iOS through brute force rather than any real technique, but I was just wondering what are the preferred tools, techniques and tips for debugging responsive issues on mobile devices?

Thanks

Upvotes: 4

Views: 645

Answers (4)

LDJ
LDJ

Reputation: 7304

Good article here also on how to use the Opera mobile emulatore and dragonfly remote debugger to debug Opera related bugs... http://mobile.smashingmagazine.com/2012/08/30/responsive-designs-opera-mobile-emulator/

Upvotes: 0

kremalicious
kremalicious

Reputation: 1371

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

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

Upvotes: 0

alonisser
alonisser

Reputation: 12078

did you look into weinre? gives you a (limited) remote web inspector (after some set up)- solved some real problems for me!

Upvotes: 1

hallvors
hallvors

Reputation: 6229

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

How are you doing solving the annoying bug in Opera, BTW? :)

Upvotes: 0

Related Questions