Developing websites to work on mobile platforms is common practice and is practically required for anyone making a website. Mobile traffic represents a significant portion of total internet traffic–somewhere around half by most estimates.
The problem is testing and debugging websites and apps on mobile devices. Mobile devices like Android™ don’t have built-in debuggers, and emulating mobile devices is never as accurate as you’d like. To debug Android, the desktop version of Chrome has a solution: remote debugging.
This article will show you how to use debug Android Chrome from your Windows PC.
Raygun lets you detect and diagnose errors and performance issues in your codebase with ease
How to debug Android Chrome
If you think you might have an Android bug but can’t quite pin it down, Raygun supports Android crash reporting.
Before you can do any debugging, you need to set up your computer to be able to recognize your Android device and allow Chrome’s debugger to recognize and attach to the phone. You will start by setting some options on the phone.
Open up the Settings app on your phone. From here, if you’re on Android 4.1 or lower, I feel sorry for you, but also, you’re free to go straight to “Developer options”. On devices with newer versions of Android, you’ll need to enable Developer options if you haven’t already. To do this, you’ll need to go to the “About Phone” menu, which is located inside the System menu on Android 8+. Once you’re in there, scroll to the bottom and tap on Build Number seven times. Now, go back to the previous screen, and you’ll find Developer options near the bottom.
Once you’re inside Developer options, you’ll need to enable developer tools by clicking the toggle at the top of the page. When the toggle says “On”, scroll down a bit and enable Android USB Debugging as well.
Computer setup (using Android USB debugging)
That’s all we can do on the phone, for now, so let’s get our computer ready. To debug Android, the first thing you’ll need to do is install the USB drivers for your phone. The Android Studio site has a list of places to find the drivers along with some instructions on how to install the drivers on your computer. Some manufacturers have links directly to a driver file, while others just lead you to a support website, in which case you’ll need to do a bit of searching to find the drivers for your device.
Once you’ve got the driver installed, you’ll also need ADB, which provides an
interface to talk to your mobile device. You can do this by going to a thread
on the XDA Forums;
scroll down to Downloads heading and click the first link in that section.
After it’s downloaded, run it to install ADB. Once it’s installed, you’ll need
to navigate to the folder where it was installed (
(x86)\Minimal ADB and Fastboot by default) and double-click cmd-here.exe ,
which will conveniently open a command prompt window in that folder. In that
window, type in
adb start-server to start the ADB server. You can now close
the command prompt.
*Note: The ADB server will need to be on anytime you wish to debug. If you
restart your computer, the server will not be running. If you would like the
server to start up automatically with your computer, open up any text editor
and type in
"C:\\Program Files (x86)\\Minimal ADB and Fastboot\\adb" start-
server. Save it as adb.bat (or any file name as long as it has the
extension) in the
Menu\Programs\StartUp folder. Now that file will be executed at startup, so
the ADB server should be up and running anytime you need it.
The last thing we need to do to set up the computer is to enable remote debugging in the Chrome developer tools. To do this, open up Chrome on your computer, and then open the Chrome developer tools by pressing Ctrl+Shift+I , or F12 . In the top-right corner of the developer tools, click the menu icon that looks like three dots, navigate to “More tools” and then click “Remote devices”.
To debug Android from here, just make sure “Discover USB devices” is checked and keep this section of the developer tools open because we’ll need it again soon.
“Discover USB devices” should be checked.
Making the connection
That’s as far as you can get with either device on its own. To debug Android, we’ll need to hook them up together. If you haven’t already, plug your phone into your PC via USB. If you didn’t do this as part of the driver installation, you’ll probably see a notification on your taskbar letting you know your computer is setting up your new device. Make sure your phone is on and unlocked. If it is and the ADB server is running, you should see a popup titled “Allow USB debugging?”.
If it doesn’t show up, look in your notification area on your Android device. If it says “Connected as a media device”, something similar to that, or something about “MTP”. Click on it.
Choose “connected as media device”
That should bring you to a screen that allows you to choose “Camera (PTP)” as the connection type, rather than “Media device (MTP)”. Once you’ve selected PTP, the “Allow USB debugging?” popup should be there.
If you’d like to avoid having to deal with this popup every time you hook up your device, check the “Always allow from this computer” option. Either way, you’ll want to click “OK”, which will let your mobile device be visible to your PC for debugging. At this point, look at the “Remote devices” section of your Chrome developer tools on your PC again. If everything went well, you should see your phone listed on the left side.
Debug Android on your device
Now it’s time to stop getting set up and start debugging! Finally! Click on the name of your phone on the “Remote devices” screen. You should see a list of tabs open in the Chrome browser on your remote device. If the tab you want to debug isn’t the active tab, click the three dots to the right of that tab’s name and click “Focus” to make it the active tab. Then click the “Inspect” button.
This should bring up the inspector for that tab. From here, you can use Chrome’s developer tools pretty much just like you would if you were debugging a web page loaded into your desktop browser. You’re even able to see your device’s screen within the developer tools. If it isn’t already showing, or if you’d like to toggle it off, click the icon right next to the inspector icon in the top left corner of the developer tools.
You can also control your device from your developer tools. Use your mouse cursor on the screencast as if your cursor was a finger on the device itself.
- Click to tap
- Click and drag to swipe
- Use your scroll wheel to scroll
Shiftwhile dragging up to zoom in
Shiftwhile dragging down to zoom out
You may notice that there are some transparent spots in the screencast. These are UI elements from the Chrome app or from your device’s system interface. They are hidden because the remote debugging protocol only allows you to interact with the web page itself, not with the entire phone.
The screencast uses a lot of your mobile device’s processing power, so you might notice the performance seems slow while you are screencasting. Therefore, if you’re trying to measure performance, disable the screencast and interact directly with the mobile device.
Finally, if you run into issues where nothing happens when you interact with your device either directly or via the screencast, try closing the Chrome app and reopening it. (You’ll need to re-connect to the remote device via the “Remote devices” screen in the developer tools). If that doesn’t help, go through this quick checklist:
- Unplug the device and plug it back in
- Lock your phone and wake it back up
- Close the developer tools window and reopen it via the “Remote devices” screen.
Debugging Android Chrome doesn’t have to be difficult. It may take a bit more setup than most of us would like, but once that’s taken care of, debugging a mobile web page becomes much simpler. You can now debug Android on a real, physical device instead of hoping Chrome’s device emulator–or any other emulator for that matter–will act just like the real thing.
Did you spend too much time discovering the Android bug in the first place? Raygun helps you detect, diagnose and destroy Android errors. Smart alerts and error grouping means you never miss a bug in your app again. Read more about Android crash reporting here.