remote debugging Chrome for Android on PC

Here follows a rewrite of Google’s remote debugging Chrome for Android instructions explicitly for PC users.

Chrome for Android allows you to debug and profile web pages using the same Chrome Developer Tools you use when developing for the desktop. To start debugging, you need to have the Android SDK and Chrome installed on your computer and make sure that you have set up your mobile device for development.

  • Connect your Droid to your computer via USB wire. To communicate with the Android device, you need the Android Debug Bridge (adb), a command line tool included in the Platform Tools of the Android SDK.
  • On the mobile device, launch Chrome. Open Settings > Advanced > Developer tools and check the Enable USB Web debugging option as shown here:

  • If you’re not using a UNIX emulator like CYGWIN, you’ll need to launch adb via the Command Prompt.How to get to a MS-DOS prompt or Windows command line.
    • Enter the location of adb in your prompt. The default place after install will be C:\Documents and Settings\yourusername\Local Settings\Application Data\Android\android-sdk\platform-tools\adb.exe. The easiest way to copy your location is to navigate to adb.exe in Windows and drag-and-drop the file directly on the command window. Or you can copy the path and right-click over the window and select “Paste.”
    • If you are using CYGWIN, add Platform Tools (<sdk>/platform-tools/) to your PATH environment variable.  This will allow you simply use the command adb.exe and you won’t have to specify the full path every time.  I did this:  
      export PATH=$PATH:"/cygdrive/c/Documents and Settings/jfishwick/Local Settings/Application Data/Android/android-sdk/platform-tools/"

      . Although generally, you can drag-and-drop thusly for the cmd line, the filename path issue between unix and Windows can be complex. When in cygwin, stick with unix style path. When you need  C:/something, use  /cygdrive/c/something

  • Please make sure that your device is listed when you issue the adb devices command. If not, please check that you have USB debugging enabled on your device. More info can be found here.
Issuing adb devices on cygwin
Issuing adb devices on cmd (using full path)
  • Issue the following commandto enable port forwarding: adb forward tcp:9222 localabstract:chrome_devtools_remote. Do this exactly how you issued the devices command above
  • Open desktop Chrome and navigate to localhost:9222 in the address bar.
  • You will be presented with the set of thumbnails for pages now open on your mobile Chrome. Choose the page you need to debug.

  • You can now start debugging and profiling mobile content in the Developer Tools on your desktop. Highlighting DOM elements on your desktop will illuminate the corresponding elements on your Droid. Wheeee!

See the Chrome Developer Tools documentation for more information. Especially the section on adb.

P.S. The default Android browser renders more like Mobile Safari. Unsure the best way to debug that sucker (sad trumpet).

What say you?