Beginners guide to remote debugging Android devices

Simple step-by-step guide to mobile debugging

Posted by Michael Gannon on March 13, 2017

TL;DR

  1. Enable USB Debugging on your Android mobile device and open Chrome.
  2. Connect your mobile device to your desktop and open Chrome on your desktop.
  3. Inspect element in Chrome and open remote devices window.
  4. Click open tab and start debugging.

Context

Your overweight, overpaid and underqualified boss is moaning that the site looks poor on his mobile device despite looking great in your desktop's browser, even when you resize to mobile dimensions.

Ever wondered why this happens or why you can’t replicate mobile specific issues on your desktop? It’s because there’s different versions of the browser for each platform e.g. Google Chrome Android Version, iOS Version, Windows Version and Mac Version.

This means problems can occur exclusively on these platforms and it may not be possible to replicate the issue and subsequently debug. The solution is to remotely debug your mobile device and it’s really simple and extremely useful! And no I don’t mean prefixing the browser url with 'view-source:’.

Step 1

Enable USB Debugging on device

It will usually be in Settings > About Phone > Build Number > Tap it 7 times to become a Developer. Then you will see Developer options is available in the Settings menu so click it and ensure USB debugging is set to on. Ensure Google Chrome is open on your mobile and your desktop simultaneously.

Step 2

Connect your device to your desktop

Connect your mobile device to the desktop, open chrome and open developer tools (Cmd + alt + i / Ctrl + shift + i). Click the 3 dots on the top right courner > More tools > Remote devices.

Step 3

Select device and open a tab

In the remote devices section, of developer tools, on the left hand side you’ll see a list of remote devices connected to the computer and a settings tab. Click Settings and ensure Discover USB devices is ticked.

Next select your device from the menu on the left, in this case it’s SM-G920F. Enter the url of the website you wish to debug on your mobile, hit open and the site will be launched on your mobile. Click 'Inspect' to the right of the site you just opened and it will allow you to traverse the DOM of your mobile phone's browser from your desktop's browser.

For anyone interested in debugging a local development environment on mobile check out this tutorial or this one. And that’s it, surprisingly simple!

Additional reading