A debugging of desktop applications is very common task in the world of web development. We might say the tooling here is highly developed and you can find everything you require and pretty easily. You can just use all those Firebugs, Chrome Web Inspectors, IE Developers Tools, etc.

Not so in world of mobile devices!

Hard Time Debugging Web Apps on Mobiles

The debugging applications on mobile were always problem – the mobile safari for iPhone/iPad offers you at least error console, so you might know when something is going wrong. The Android built-in browser does not even provide you such tool!

WebKit Web Inspector

But the WebKit based browsers has solution to this – they offers WebKit Web Inspector, which you might be familiar with from using Chrome/Safari.

Fortunately, WebKit functionality has arrived to mobile browsers yet!

Inspector for Safari / iPhone

From little bit of search, I have found Safari was enabled to use remote debugging bridge year ago!

Inspector for Chrome Beta / Android

But as Ubuntu/Android user, I wasn’t able to use such a comfort. Until now!

I have upgraded my HTC to Android 4 yesterday and the Chrome Beta was the first application I installed there (it isn’t available for previous Android releases).

Today I have dived into RichFaces issue which occurred on mobiles. What a pain it could be when trying to find the cause, since mobile browsers doesn’t even provide you the exact line where JavaScript error has occurred.

And guess what? Chrome Beta already allows the same like Safari – WebKit Web Inspector through the USB debugging bridge.

How To…

The process is quite straight-forward:

• setup the USB debugging
• let’s start from step 2 – Turn on “USB Debugging” on your device.
• for Ubuntu users, one additional step is required which involves registration device into udev system (described in the link above)

• enable USB web debugging in Chrome Beta 
• involving installation of Android SDK