Getting Started with remote debugging Android devices

Getting Started with remote debugging Android devices

• Directory
• Requirements
• 1th Step: Discover your Android device
• 2nd step: Debug the content on your Android device from your development computer.
  • More actions: Reload, focus, or close a label
  • Check element
  • Capture screen of Android device to development computer
• Feedback

byKayce Basques Technical Writer at Google

Remotely debug live content on an Android device from a Windows, MAC, or Linux computer. This tutorial will show you how to:

• Set up your Android device for remote debugging and discover the device from your development computer.
• Check and debug real-time content on your Android device from your development computer.
• Capture the content on your Android device to a DevTools instance on your development computer.

Requirements

• Chrome 32 or later is installed on the development computer.
• The USB driver is installed on the development computer (if you are using Windows). Make sure Device Manager reports the correct USB driver
• Have a USB cable that can connect your Android device to your development computer.
• Android version 4.0 or later.
• Chrome (Android version) is installed on your Android device.

1th Step: Discover your Android device

2. On your Android device, select Settings > Developer options > Enable USB Debugging. On devices running Android 4.2 and later, theDeveloper options are hidden by default. See Enable developer options on your device to learn how to enable it.

4. Open Chrome on your development computer. You should sign in to Chrome using one of your Google accounts. Remote debugging does not work in Incognito mode or guest mode.

6. Open DevTools.

8. In DevTools, click Main Menu , and then select more tools > Remote devices.

10. In DevTools, click the Settings tab (if another label is being displayed).

12. Make sure that the Discover USB devicesis enabled.

14. Connect your Android device directly to your development computer using a USB cable. Do not use any intermediate USB hubs. If this is the first time you have connected your Android device to this development computer, your device will appear in Unknown with text Pending Authorizationunderneath it.

16. If your device appears as Unknown, accept the Allow USB debugging permission prompt on your Android device. Unknown is replaced with the model name of your Android device. The green circle and Connected text means you are done, and you can debug your Android device remotely from your development computer.

Note: If you encounter any problems with the discovery process, you can select Settings > Developer options > Revoke USB Debugging Au on your Android device Thorizations Restart the process.

2nd step: Debug the content on your Android device from your development computer.

1. If you haven't already turned on Chrome on your Android device, open it now.

2. Return to DevTools and click on the label that matches the model name of the device. At the top of this page, you'll see the model name of your Android device followed by its serial number. Below the model name, you can see the version of Chrome running on the device, with the version number in parentheses. Each open Chrome tag will have its own area. You can interact with the label from this area. If you have any apps that use WebView, you'll also see the area for each app. The following screen does not have any open tags or webviews.

3. Enter a URL next to the New tab and click Open. This page will open in a new tab on your Android device.

4. Click the Inspectnext to the URL you just opened. This will open a new DevTools instance. The version of Chrome that is running on your Android device determines the version of DevTools that is open on your development computer. So, if your Android device is running a very old version of Chrome, the DevTools instance might look a lot different than the one you use most often.

More actions: Reload, focus, or close a label

Click the more Options next to the tab you want to reload, focus, or close.

Check element

Go to the Elements panel of your DevTools instance, hover over an element to highlight it in the viewport of your Android device.

You can also click an element on the Android device screen to select it in the Elements panel. Click Select element on your DevTools instance, and then tap this element on your Android device screen. Note thatSelect Element will be deactivated after the first touch, so you will need to re-enable it every time you want to use this feature.

Capture screen of Android device to development computer

Tap Toggle screencast ! [Toggle Screencast] [Screencast] {:. Devtools-inline} to view the contents of your Android device in your devtools instance.

You can interact with the capture screen in a variety of ways:

• Turn the tap into a tap to trigger the appropriate touch event on the device.
• Sends the keys on the computer to the device.
• To simulate a two-finger pinch gesture, press and hold the Shift drag.
• To scroll, use your trackpad or mouse wheel, or use your mouse pointer to scroll.

Some things to note about screen capture:

• The capture screen displays only the contents of the page. The transparent part of the capture screen represents the device interface, such as the Chrome multifunction box, the Android status bar, or the Android keyboard.
• The capture screen can negatively affect the frame rate. Disables the capture screen when measuring scrolling or animation to more accurately understand the performance of the page.
• If your Android device screen is locked, your capture screen content will disappear. Unlock your Android device screen to automatically resume the capture screen.

Getting Started with remote debugging Android devices