Chrome’s mobile browser emulator is useful and powerful, but it’s no substitute for interacting with your website or app on a real device to evaluate the full user experience. You should also.
Developing websites to work on mobile platforms is common practice and ispractically required for anyone making a website. Mobile traffic represents asignificant portion of total internet traffic–somewhere around half by mostestimates.
The problem is testing and debugging websites and apps on mobile devices.Mobile devices like Android™ don’t have built-in debuggers, and emulatingmobile devices is never as accurate as you’d like. To debug Android, thedesktop version of Chrome has a solution: remote debugging.
This article will show you how to use debug Android Chrome from your WindowsPC.
Raygun lets you detect and diagnose errors and performance issues in your codebase with ease
It takes minutes to add Raygun into your software. Be alerted to issues affecting end users and replicate problems 1,000x faster than using logs and incomplete information from users. Learn more and try Raygun free for 14 days.
![Samsung driver for debugging on chrome browser in osx windows 10 Samsung driver for debugging on chrome browser in osx windows 10](/uploads/1/2/5/8/125853287/837693461.png)
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.
Setting up
Before you can do any debugging, you need to set up your computer to be ableto recognize your Android device and allow Chrome’s debugger to recognize andattach to the phone. You will start by setting some options on the phone.
Phone settings
Open up the Settings app on your phone. From here, if you’re on Android 4.1 orlower, 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 toenable Developer options if you haven’t already. To do this, you’ll need to goto the “About Phone” menu, which is located inside the System menu on Android8+. Once you’re in there, scroll to the bottom and tap on Build Number seventimes. Now, go back to the previous screen, and you’ll find Developer optionsnear the bottom.
Once you’re inside Developer options, you’ll need to enable developer tools byclicking the toggle at the top of the page. When the toggle says “On”, scrolldown 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 driversfor your phone. The Android Studio site has a list of places to find thedrivers along withsome instructions on how to install the drivers on your computer. Somemanufacturers have links directly to a driver file, while others just lead youto a support website, in which case you’ll need to do a bit of searching tofind the drivers for your device.
Once you’ve got the driver installed, you’ll also need ADB, which provides aninterface to talk to your mobile device. You can do this by going to a threadon 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 needto navigate to the folder where it was installed (
C:Program Files(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 thatwindow, type in adb start-server
to start the ADB server. You can now closethe command prompt.*Note: The ADB server will need to be on anytime you wish to debug. If yourestart your computer, the server will not be running. If you would like theserver to start up automatically with your computer, open up any text editorand type in
'C:Program Files (x86)Minimal ADB and Fastbootadb' start-server
. Save it as adb.bat (or any file name as long as it has the .bat
extension) in the C:ProgramDataMicrosoftWindowsStartMenuProgramsStartUp
folder. Now that file will be executed at startup, sothe 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 remotedebugging in the Chrome developer tools. To do this, open up Chrome on yourcomputer, 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 iconthat looks like three dots, navigate to “More tools” and then click “Remotedevices”.
To debug Android from here, just make sure “Discover USB devices” is checkedand keep this section of the developer tools open because we’ll need it againsoon.
“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 phoneinto your PC via USB. If you didn’t do this as part of the driverinstallation, you’ll probably see a notification on your taskbar letting youknow your computer is setting up your new device. Make sure your phone is onand unlocked. If it is and the ADB server is running, you should see a popuptitled “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, orsomething about “MTP”. Click on it.
Choose “connected as media device”
That should bring you to a screen that allows you to choose “Camera (PTP)” asthe connection type, rather than “Media device (MTP)”. Once you’ve selectedPTP, the “Allow USB debugging?” popup should be there.
If you’d like to avoid having to deal with this popup every time you hook upyour 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 toyour PC for debugging. At this point, look at the “Remote devices” section ofyour Chrome developer tools on your PC again. If everything went well, youshould 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 onthe name of your phone on the “Remote devices” screen. You should see a listof tabs open in the Chrome browser on your remote device. If the tab you wantto debug isn’t the active tab, click the three dots to the right of that tab’sname and click “Focus” to make it the active tab. Then click the “Inspect”button.
Click “Inspect”
This should bring up the inspector for that tab. From here, you can useChrome’s developer tools pretty much just like you would if you were debugginga web page loaded into your desktop browser. You’re even able to see yourdevice’s screen within the developer tools. If it isn’t already showing, or ifyou’d like to toggle it off, click the icon right next to the inspector iconin the top left corner of the developer tools.
Debugging Tips
You can also control your device from your developer tools. Use your mousecursor 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
- Hold
Shift
while dragging up to zoom in - Hold
Shift
while dragging down to zoom out
You may notice that there are some transparent spots in the screencast. Theseare UI elements from the Chrome app or from your device’s system interface.They are hidden because the remote debugging protocol only allows you tointeract with the web page itself, not with the entire phone.
The screencast uses a lot of your mobile device’s processing power, so youmight notice the performance seems slow while you are screencasting.Therefore, if you’re trying to measure performance, disable the screencast andinteract directly with the mobile device.
Finally, if you run into issues where nothing happens when you interact withyour device either directly or via the screencast, try closing the Chrome appand 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, gothrough 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.
Conclusion
Debugging Android Chrome doesn’t have to be difficult. It may take a bit moresetup than most of us would like, but once that’s taken care of, debugging amobile web page becomes much simpler. You can now debug Android on a real,physical device instead of hoping Chrome’s device emulator–or any otheremulator 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.
Further reading
Can’t make the
#ChromeDevSummit
this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website. Remote debug live content on an Android device from your Windows, Mac, or Linux computer. This tutorial teaches you how to:
- Set up your Android device for remote debugging, and discover it fromyour development machine.
- Inspect and debug live content on your Android device from your developmentmachine.
- Screencast content from your Android device onto a DevTools instance on yourdevelopment machine.
Step 1: Discover your Android device
The workflow below works for most users. See Troubleshooting: DevTools is not detecting theAndroid device for more help.
- Open the Developer Options screen on your Android. See Configure On-Device DeveloperOptions.
- Select Enable USB Debugging.
- On your development machine, open Chrome.
- Open DevTools.
- In DevTools, click the Main Menu then select More tools > Remote devices.
- In DevTools, open the Settings tab.
- Make sure that the Discover USB devices checkbox is enabled.
- Connect your Android device directly to your development machine using a USBcable. The first time you do this, you usually see that DevTools has detected an unknowndevice. If you see a green dot and the text Connected below the model name ofyour Android device, then DevTools has successfully established the connection toyour device. Continue to Step 2.
- If your device is showing up as Unknown, accept the Allow USBDebugging permission prompt on your Android device.
Troubleshooting: DevTools is not detecting the Android device
Make sure that your hardware is set up correctly:
- If you're using a USB hub, try connecting your Android device directly to yourdevelopment machine instead.
- Try unplugging the USB cable between your Android device and development machine, andthen plugging it back in. Do it while your Android and development machine screensare unlocked.
- Make sure that your USB cable works. You should be able to inspect files on your Android devicefrom your development machine.
Make sure that your software is set up correctly:
- If your development machine is running Windows, try manually installing the USB drivers foryour Android device. See Install OEM USB Drivers.
- Some combinations of Windows and Android devices (especially Samsung) require extraset up. See Chrome DevTools Devices does not detect device when plugged in.
If you don't see the Allow USB Debugging prompt on your Android device try:
- Disconnecting and then re-connecting the USB cable while DevTools is in focus onyour development machine and your Android homescreen is showing. In other words,sometimes the prompt doesn't show up when your Android or development machine screensare locked.
- Updating the display settings for your Android device and developmentmachine so that they never go to sleep.
- Setting Android's USB mode to PTP. See Galaxy S4 does not show Authorize USB debuggingdialog box.
- Select Revoke USB Debugging Authorizations from the Developer Options screen on yourAndroid device to reset it to a fresh state.
If you find a solution that is not mentioned in this section or in Chrome DevTools Devicesdoes not detect device when plugged in, please add an answer to that StackOverflow question, or open an issue in the webfundamentals repository!
Step 2: Debug content on your Android device from your development machine
- Open Chrome on your Android device.
- In the Remote Devices tab, click the tab that matches your Android device model name.At the top of this page, you see your Android device's model name, followed by its serialnumber. Below that, you can see the version of Chrome that's running on the device, withthe version number in parentheses. Each open Chrome tab gets its own section. You caninteract with that tab from this section. If there are any apps using WebView, you see asection for each of those apps, too. In Figure 5 there are no tabs or WebViews open.
- In the New tab text box, enter a URL and then click Open. The page opensin a new tab on your Android device.
- Click Inspect next to the URL that you just opened. A new DevToolsinstance opens. The version of Chrome running on your Android devicedetermines the version of DevTools that opens on your development machine.So, if your Android device is running a very old version of Chrome, theDevTools instance may look very different than what you're used to.
More actions: reload, focus, or close a tab
Click More Options next to thetab that you want to reload, focus, or close.
Inspect elements
Go to the Elements panel of your DevTools instance, and hover over anelement to highlight it in the viewport of your Android device.
You can also tap an element on your Android device screen to select it in theElements panel. Click Select Element on your DevTools instance, and then tapthe element on your Android device screen. Note that Select Elementis disabled after the first touch, so you need to re-enable it every timeyou want to use this feature.
Screencast your Android screen to your development machine
Click Toggle Screencast to view the content of your Android device in your DevTools instance.
You can interact with the screencast in multiple ways:
- Clicks are translated into taps, firing proper touch events on the device.
- Keystrokes on your computer are sent to the device.
- To simulate a pinch gesture, hold Shift while dragging.
- To scroll, use your trackpad or mouse wheel, or fling with your mousepointer.
Some notes on screencasts:
- Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Chrome address bar, the Android status bar, or the Android keyboard.
- Screencasts negatively affect frame rates. Disable screencasting whilemeasuring scrolls or animations to get a more accurate picture of yourpage's performance.
- If your Android device screen locks, the content of your screencastdisappears. Unlock your Android device screen to automatically resume thescreencast.
Feedback
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.