Debug Mobile Web

Recently I start to develop mobile web, so summarize the debug methods I have explored. Apart from traditional annoying alert and verbose console.log, on desktop I prefer to Chrome developer tool (cmd+shift+I) which is so developer friendly to debug web site. (Safari has developer tool, Firefox has firebug, Opera has dragonfly, IE has F9). Fortunately on mobile web, we also can get similar tools and methodologies to help mobile web development.

Weinre
http://people.apache.org/~pmuellr/weinre-docs/latest/Home.html
It's a debugger for web pages, like FireBug (for FireFox) and Web Inspector (for WebKit-based browsers), except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.

It has debug server, debug client and debug target.

Adobe® Shadow
http://labs.adobe.com/technologies/shadow/
Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices.

As Flash is dropped in iOS, it seems that Adobe is putting more effort to HTML5 and mobile web now (There is a free upcoming event Create the web tour in San Francisco, Sept 2012), and Adobe is creating many good resources and tools for the prominent Web.

iWebInspector
http://www.iwebinspector.com
iWebInspector is a free tool to debug, profile and inspect web applications running on iOS Simulator (iPhone or iPad). @firt is a true expert in Mobile Web, I had his 'Programming the Mobile Web' book with his signature from last year's Velocity conference at Santa Clara. He also created the excellent http://mobilehtml5.org/

Chrome
Chrome settings - Override User Agent/Override device metrics

Safari
Enable Safari's developer tools, then set Safari's UserAgent to Safari iOS

Bookmarklets
I know there are a bunch of bookmarklets to help mobile Web debug, but I have not explored them yet, will update this post when I get chance to try them out.