In fact, mobile web app debugging is so damn tricky, that I gave up, and decided to build this very tool instead. See the videos examples if you'd rather see this in action now.
To create a new session, in the jsconsole prompt, simply run:
This will yield a unique key along the lines of
FAE031CD-74A0-46D3-AE36-757BAB262BEA. Now using this unique key, include a
<script> anywhere in the web app that you wish to debug:
Now any calls to
console.log from your web app will display the result in the jsconsole session that is listening to your key. Equally, if you run a command in the jsconsole session, the code will injected in to your web app and the result returned to jsconsole.
In addition to generating a new code with
:listen, you can also ask jsconsole to listen to a predefined code (but for your own security, try to chose something unique that only you know):
Now I can use the same remote key in my web app to avoid having to regenerate a new code each time. Note that only the last remote client (i.e. your web app) to connect to jsconsole will recieve remote debug calls - previous windows will be ignored.
To know when the web app has connected, jsconsole will notify you by showing your the
userAgent string for the device:
:listen FAE031CD-74A0-46D3-AE36-757BAB262BEA Creating connection... Connected to "FAE031CD-74A0-46D3-AE36-757BAB262BEA" Connection established with Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-GB; rv:220.127.116.11) Gecko/20100722 Firefox/3.6.8
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!
Remote debugging has been developed to work on all platforms, even if the technology isn't supported. However, jsconsole remote debugging has specifically tested and working on the follow mobile devices (feel free to add to this list):