Debugging Mobile Web Apps: Weinre and JSConsole Now, Remote WebKit Eventually
alert() or logging to the console to see if code's been reached or to show the state of a variable; inspecting the state of the DOM or CSS styles is difficult or impossible too.
A few tools help to work around the deficiencies of the browsers while the browsers manufacturers work on fixing the situation by including proper debuggers and remote debugging.
The present: workarounds for mobile debugging
Both workarounds and the future mobile debugging support have one thing in common: they work remotely; debugging doesn't happen on the mobile devices but on some other machine that connects a debugging GUI via the network.
What can Weinre do? Once a debug target is hooked up to the debugger GUI, the user can see console ouput written by the code in the debug target as well as
Missing are features that need VM support, such as setting or catching breakpoints and related functionality, as well as profiling
JSConsole is a tool in a similar vein as Weinre, albeit more focused on the console output and
The future: remote debugging
The solution is to put the debugging functionality into the mobile runtimes and then make it available via a remote protocol.
What this will look like can be gleaned from platforms that already support it. One example is Blackberry's remote debugging support on the Playbook tablet, which includes the latest WebInspector and remote debugging features from the WebKit project.
Opera's mobile browsers also support remote debugging using the DragonFly debugger. Note that Opera Mobile is a full featured browser; Opera Mini on the other hand basically just shows HTML rendered on a server and relays user events.
It remains to be seen when the browsers on iOS and Android will follow and include remote debugging.
Do you use a debugging tool we haven't mentioned?