The framework for debugging web pages (and phoneGap apps) on Android is finally getting easier.
https://developers.google.com/chrome-developer-tools/docs/remote-debugging
Following the instructions will get you there, but the notes below might help spell out some of the steps. Here's what you need.
- Chrome 31 or higher on your desktop.
- An Android Kitkat device.
Yes, it's Kitkat only. Earlier versions of Android are not quite so easy to hook up.
On your android device, you will need to set it to "developer" mode. Navigate here on the device...
Settings >> About phone >> Build number
Tap - seven times - on the "Build number" entry. You should get 3 extra lives, and Android will confirm that you are in "developer mode." Once your phone is switched to "developer" it actually presents differently to a connected desktop OS. So when you plug it into a Windows machine, your desktop will no longer have a suitable driver. You should be able to see this when you plug in the phone.
Start Menu >> Control Panel >> Device Manger >> Portable Devices
Even if your Android device worked fine previously with Windows, Windows now needs a new driver to access the developer stuff. Where do you get the driver?
The Android SDK
The SDK is an enormous (half Gig) download. Rather overkill if all you're looking for is the driver, but... that's where to find it. https://developer.android.com/sdk/index.html
Alternate: Just download the SDK installer (only 86 Meg) but I haven't done this route, so I'm not sure of the subsequent steps... http://dl.google.com/android/installer_r22.3-windows.exe
Let's assume you download and unzip the full SDK. Run "SDK Manager.exe" which is found in the new unzipped root folder.
From the "SDK Manager" program, choose and install the Google APIs. It is this "Google APIs" step that actually downloads the usb driver that you need. The other 1.5 Gigs of stuff were not necessary.
After the SDK Manger has fetched the Google APIs, you now have the appropriate USB driver in this directory:
[sdk-folder]/sdk/extras/google/usb_driver
You can follow these instructions for installing the driver. Reference http://developer.android.com/tools/extras/oem-usb.html
EXTRA FUN If you have a Nexus 5 phone, you will have to modify the driver .inf settings.
http://stackoverflow.com/questions/20168898/nexus-5-usb-driver
When your phone is set to "developer" and it's been hooked up to your desktop with the right driver, you can now open Chrome on the desktop.
Type this in the Chrome address bar:
chrome://inspect/
You should see an option to "discover USB devices." Once engaged, your android browser should show up as item that you can "inspect". And it works just like Chrome developer tools are supposed to work.