Mobile usability is becoming more and more important for brands interested in leveraging more traffic not just from mobile devices but from search engines as well. In May 2016 Google announced the latest boost to their mobile friendly algorithm which serves to give an additional rankling boost for mobile friendly websites in the mobile search results.
This can cause a bit of a headache for web developers though. As with any digital project, once the design and build is completed, it moves into testing, and this is where all the refinements happen that ensure once the work goes live, it delivers a great user experience that ultimately results in valuable online interactions for the client.
When it comes to testing on mobile devices though, it can be a little bit of a mine field due to the sheer diversity of devices, browsers and operating systems on the market. But since January 2014, with release of Google Chrome version 32, remote debugging for Android devices makes life a little easier…
How Does It Work?
To get started with remote debugging for Android, there are a few requirements you need to meet first.
You must have Chrome 32+ for Windows.
You need to install OEM USB Drivers.
You’ll need the appropriate USB cable for your device.
You need the latest available version of Google Chrome for Android from the Google Play Store
And you need Android version 4.0 (Ice Cream Sandwich) or later
Once you have all that in place, the next step is to enable Android USB Debugging.
To do this go into your Android settings, select Developer Options and enable USB Debugging. (Developer Options are enabled by default, but if for whatever reason it’s not enabled on your device, go to Settings > About and tap the Build Number 7 times).
Next you need to Discover Android Device.
On Chrome for Windows open Developer Tools by hitting F12. In DevTools, click the Main Menu icon and select More Tools > Remote Devices > Settings. Make sure that Discover USB Devices is enables. Connect Android device.
If the device hasn’t been connected to the PC before, it will show in the left menu as “Unknown” with a red circle. Check your phone for a pop-up to accept “Allow USB Debugging”. This will then change to a green circle with the actual device name.
Not Working?
If you find it’s still not working for you after completing the steps above then here’s plan B.
Download the Android Debug Bridge (ADB) which can be found in the platform tools package of the Android Software Development Kit (SDK) manager, or if you’d prefer download the platform tools package separately from
here.
If you’ve downloaded the standalone package, extract the contents of the downloaded file (for example: platform-tools-latest-windows.zip, if Windows)
Load command prompt (in administrator mode) and enter the following (yes, include the quotations): cd “<path_to_platform-tools_folder>” For example: cd “C:\Users\User\Downloads\platform-tools”
Now enter the command “adb devices” (without the quotations). This will start the Android Debug Bridge daemon, the service to allow the computer to speak with an android device and then list all the Android devices connected to your computer.
If the device has never been authorised with the computer, it will show the device as “unauthorized” to which you’ll be prompted to “Allow USB Debugging” on you Android device.
If however you have previously (or just now) authorised the device run the command again (press the up arrow to repeat the last command) to confirm it’s visible and authorised. If it’s authorised, it will now show “device” instead of “unauthorized”.
Close the command prompt.
Check Dev Tools again.
Once you’ve set up remote debugging for Android devices you’ll be able to open Chrome on your Android device and see the tabs you have open in Dev Tools as well. This then gives you the power to inspect the URL or tab on your mobile device that you’d like to investigate and debug.
It also removes the hassle of trying to replicate usability issues and bugs found on mobile devices on the desktop version, streamlining the testing and debugging process.
For more information then we recommended reading
this article on remote debugging and
this article on port forwarding from Google Developers.
Go Above And Beyond With Your Testing
We also embrace the use of BrowserStack which is a subscription & cloud-based cross-browser testing tool that enables our developers to test their websites across various browsers on different operating systems and mobile devices, without requiring users to install virtual machines, devices or emulators.
From experience this tool isn’t always 100% accurate (though close to it!) to the results of a physical device and Android Remote Debugging has come in very handy.