The rising popularity of smartphones and tablets means web sites need to be optimized or even adapted for mobile browsers. However, the tooling for debugging on mobile platforms is anemic; modern desktop browsers come with full featured debuggers for Javascript and the DOM as well as profilers. On mobile platforms, debugging is reduced to popping up a dialog box with 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.
One such tool is Weinre, developed by Patrick Mueller and now a PhoneGap project. The debugging functionality in Weinre is written in Javascript and has to be included in the debug target, ie. the HTML page to be debugged. To access the debug target, Weinre ships with a server that is connected to the debug target and relays messages and commands to/from the debugger GUI. The debugger GUI is basically WebKit's Web Inspector, which is written in HTML and Javascript.
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 eval Javascript code in the debug target's environment. Weinre also supports viewing and editing the DOM and CSS styles of the debug target.
Missing are features that need VM support, such as setting or catching breakpoints and related functionality, as well as profiling
PhoneGap is a cross platform framework that allows applications to use HTML/Javascript for GUIs while still gaining access to local APIs. Making mobile web debugging easier is important for PhoneGap, and so Weinre's now part of the PhoneGap project.
JSConsole is a tool in a similar vein as Weinre, albeit more focused on the console output and eval. Visiting the JSconsole site, the user types in ":listen" and gets a snippet of Javascript code with a hardcoded GUID. This script source needs to be added to the web page to be debugged; upon loading the page, the code will connect to the JSConsole server, and, using the GUID, associate the session with the user's online session, ie. the console in the user's browser is now connected to the Javascript runtime of the page under the debugger.
iOS users can also use install apps that help with getting access to the Javascript runtime, either the JSConsole app or Bugaboo
The future: remote debugging
These workarounds allow the user to reach into the Javascript context on the mobile browser to observe and interact - to a certain degree. However, developers are used to more powerful tools in desktop browsers: various types of breakpoints (line based or triggered by exceptions or DOM changes), profiling, and more.
The solution is to put the debugging functionality into the mobile runtimes and then make it available via a remote protocol.
The WebKit project recently announced remote debugging support, which means the debugging functionality in the runtime can be accessed by a network protocol, which means the debugger GUI can live in another process or another machine. This is already supported to some degree in various browsers and Javascript engines as it's obviously crucial to allow 3rd party debugger GUIs like IDEs that allow the user to connect to the debugger from within their work environment. Firefox is working on CrossFire, a protocol to access the debugging functionality and there's also the Google V8 remote debugging protocol, which is already used by various IDEs, eg. Cloud9's debugger for Chrome and Node.js debugging. Note that CrossFire and WebKit's new protocol offer support for the whole range of web debugging features, ie. Javascript, DOM, CSS, etc, whereas the V8 protocol only supports the Javascript functionality.
Once mobile Javascript runtimes and HTML components support these remote protocols, their debugging support will equal the one of desktop browsers.
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?