Debugging web page code on Android from desktop machines

I needed to do some simple web-page / Javascript debugging work on an Android device. My need was simple: look at the console log. But setting things up to do it was not simple.

It didn’t help that most of the online information about this is buried in edits to years-old Stack Overflow answers.

Desired Result

When it’s set up here’s what we want to do:

  • Plug the Android device into the Windows machine with a USB cable
  • Hit chrome://inspect#devices from a desktop Chrome browser
  • Start up the browser on the Android device
  • Locate the Android device in the device list
  • Open the web page on the Android device
  • Inspect the page from the desktop browser, using the remote dev tools capability

Setting it up is the hard part.

Enable Developer Options and Debugging

First, we must enable developer options on the Android device.  On modern Android versions this takes some trickery. We must find the place in Android’s Settings app that shows the Android build number. Various phone vendors put this information in different places.

  • We can try Settings > About phone and scroll to the bottom, to see if the build number is there.
  • If the Settings app has a search function, we can search for Build number, or Software information, or About phone.
  • When we have found the Build Number, tap it seven times to enable Developer Options.

Enable USB Debugging

Next we must set up the Android device to communicate with our desktop machine via the Android Debug Bridge. On your device:

  • Find the newly enabled Developer options tab in the Settings app. It usually shows up at the bottom of the main Settings screen.
  • On that tab, find the USB debugging option and switch it on.

To enable debugging in Chrome or the Samsung browser, select Enable Remote Debugging in the Advanced Settings for your browser on the Android device.

To enable debugging in Firefox for Android, select Enable Remote Debugging via USB in the Advanced Settings in Firefox on the Android device.

Install the Android Debug Bridge on your desktop machine

Various ancient authorities (old web sites) recommend installing Android Studio or the standalone Android SDK Platform-Tools package. You can do that if you want, but it’s overkill for debugging web site code in browsers. Just install the Android Debug Bridge minimal_adb_fastboot package. It provides the adb.exe program you need. You can find it here or by searching for it with your favorite search engine.

Run the Android Debug Bridge on your desktop machine

You need to reenable this Android Debug Bridge (adb) each time you reboot your desktop machine. There’s a way to make it start automatically, but that’s beyond the scope of this note.

  • Disconnect your Android device USB cable for now
  • Find the adb.exe (the adb executable program) on your machine
  • Get a shell or command prompt and set the current working directory to the directory containing adb.exe
  • Connect your Android device USB cable again
  • Give the command ./adb devices. You should see something like this:
List of devices attached
9cafe735dead584c53 unauthorized
  • At the same time you should see a prompt on your Android device asking for permission to connect. Grant that permission.

Debug Chrome or Samsung browser code

Open up Chrome, or the Samsung browser, on your device and visit the page you hope to debug.

On Chrome on your desktop, open chrome://inspect#devices  .  Your device will (eventually) appear. Click the Inspect link.

Debug Firefox browser code

You need to do all the Android Debug Bridge stuff just as you would for Chrome.

Open up Firefox on your device and visit the page you hope to debug.

On Firefox on your desktop,  open about:debugging#/setup , You may need to press Refresh Devices.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *