nidhinkumar's Blog

Remote Debug Android Device using Chrome DevTools

Remote Debug Android Device using Chrome DevTools

nidhinkumar's photo
nidhinkumar
·

3 min read

Source: Nidhinkumar

If you don’t have time to read but want to know what’s there in this post. Find the quick read 👇

Overview

In, this blog we will see how to inspect a page running on an Android device from your local machine using Remote Debugging with Google Chrome.

Objectives

  1. Setup and Discover your Android device for remote debugging from your local machine

  2. Inspect and debug live content on your Android device from the local machine

  3. Screencast content from your Android device to the DevTools instance

1: Setup and Discover your Android device for remote debugging

  1. Open Developer options screen on your Android device. See 👉 Configure on-device developer option

  2. Select Enable USB Debugging

  3. Open Chrome on your local machine and type the following in the search bar chrome://inspect#devices

  4. Make sure the Discover USB Devices checkbox has been enabled

5. Connect your Android device directly to your local machine using a USB cable and click Trust this computer message shown in Android device when you are connecting it to USB Debugging for the first time

6. If your device is showing up as Offline, accept the Allow USB Debugging permission prompt on your Android device.

7. Once your device is connected you could see the device informations such as the Android device’s model name, followed by its serial number as well as if there are any apps using WebView, you see a section for each of those apps, too.

2: Inspect and debug live content on your Android device from the local machine

In the Open tab with URL enter a URL that will open up on your Android device

Once a page is opened you could see some options like inspect, pause, focus tab, reload and close.

Go to the Elements panel of your DevTools instance, and hover over an element 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 the Elements panel.

3: Screencast content from your Android device to the DevTools instance

Click the 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 mouse pointer.

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 while measuring scrolls or animations to get a more accurate picture of your page’s performance.

  • If your Android device screen locks, the content of your screencast disappears. Unlock your Android device screen to automatically resume the screencast.

Congratulations!

You have learned how to remote debug your Android device using Chrome Devtools. Will Catch you up in a new post till then Happy Learning:)

AndroiddebuggingChrome