Bewerken

Share via

Remotely debug Android devices

  • Artikel

Remote debug live content on an Android device from your Windows or macOS computer. The following tutorial page teaches you how to:

  • Set up your Android device for remote debugging, and discover it from your development machine.

  • Inspect and debug live content on your Android device from your development machine.

  • Screencast content from your Android device onto a DevTools instance on your development machine.

Note

Remote debugging the Microsoft Edge app on iOS devices isn't currently supported. The following guide is specifically focused on remote debugging Microsoft Edge on Android devices. If you have a macOS device, follow the Brightcove Debugging guide to remotely debug Microsoft Edge on an iOS device using Safari. For more information about the Web Inspector tool in Safari, see Safari Web Development Tools.

Step 1: Discover your Android device

The workflow below works for most users. For more help, see Troubleshooting: DevTools isn't detecting the Android device, below.

  1. Open the Developer Options screen on your Android. See Configure On-Device Developer Options.

  2. Select Enable USB Debugging.

  3. On your development machine, open Microsoft Edge.

  4. In the Address bar, go to edge://inspect.

    The edge://inspect page in Microsoft Edge

  5. Connect your Android device directly to your development machine using a USB cable. The first time you try to connect, a prompt should be displayed about DevTools detecting an unknown device. Accept the Allow USB Debugging permission prompt on your Android device.

    The Allow USB Debugging permission prompt on an Android device

  6. If the model name of your Android device is displayed, then Microsoft Edge has successfully established the connection to your device. Continue to the Step 2 section.

Troubleshooting: DevTools isn't detecting the Android device

Use the following tips to help you troubleshoot the correct settings for your hardware.

  • If you are using a USB hub, try connecting your Android device directly to your development machine.
  • Try unplugging the USB cable between your Android device and development machine, and then re-plugging your USB cable. Complete the task while your Android and development machine screens are unlocked.
  • Make sure that your USB cable works. You should be able to inspect files on your Android device from your development machine.

Use the following tips to help you verify that your software is set up correctly.

If the Allow USB Debugging prompt isn't displayed on your Android device, try:

  • Disconnecting and then re-connecting the USB cable while DevTools is in focus on your development machine and your Android homescreen is showing. Sometimes the prompt isn't displayed when your Android or development machine screens are locked.
  • Updating the display settings for your Android device and development machine so that they never go to sleep.
  • Setting the USB mode for Android to PTP. See Galaxy S4 does not show Authorize USB debugging dialog.
  • Select Revoke USB Debugging Authorizations from the Developer Options screen on your Android device to reset it to a fresh state.

If you find a solution that isn't mentioned on this page or in DevTools Devices does not detect device when plugged in on Stack Overflow, please add your solution to that Stack Overflow question.

Step 2: Debug content on your Android device from your development machine

  1. Open Microsoft Edge on your Android device.

  2. Go to edge://inspect. The model name of your Android device is displayed, followed by the device serial number. Below that, the version of Microsoft Edge running on the device should be displayed, with the version number in parentheses. Each open Microsoft Edge tab gets a unique section. You can interact with that tab from a section.

A connected remote device

  1. In the Open tab with url text box, enter a URL and then click Open. The page opens in a new tab on your Android device.

  2. Click inspect next to the URL that you just opened. A new DevTools instance opens.

More actions: focus, refresh, or close a tab

Select focus tab, reload, or close next to the tab that you want to focus, refresh, or close.

The buttons for focusing, refreshing, or closing a tab

Inspect elements

Go to the Elements tool 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 tool. Click Select Element (Select Element) icon on your DevTools instance, and then select the element on your Android device screen.

Select Element is disabled after the first selection, so you need to re-enable it every time you want to use this feature.

Screencast your Android screen to your development machine

Click the Toggle Screencast (Toggle Screencast) icon 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.

Use the following tips to help you screencast:

  • Screencasts only display page content. Transparent portions of the screencast represent device interfaces, such as the Microsoft Edge 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 the performance of your page.
  • If your Android device screen locks, the content of your screencast disappears. Unlock your Android device screen to automatically resume the screencast.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License. The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 International License.