[Go] Use Chrome remote debugging on your Android device

The experience of your Web content on your mobile device may be completely different from your computer. Chrome DevTools provides remote debugging capabilities, which allows you to debug your development content on your Android device in real time.

Android Remote Debugging support:

• Debug the Web site in the Browser tab.
• Debug Web content in your native Android app.
• Project the screen from your Android device onto your development machine.
• Use port forwarding and virtual host mapping to get your Android device to access the server you are using for development.

Demand

To start remote debugging, you need to:

• Install Chrome 32 or later.
• Connect the USB cable for your Android device.
• For debugging via browser: Android 4.0 + and Chrome for Android installed.
• For debugging by app: Android 4.4 and apps include wenview components that can be used for debugging.

Tip: Remote debugging requires a version of Chrome on your PC that is higher than the Android version. To better use this feature, use the PC-side Chrome Canary (mac/windows) or the Dev Channel release (Linux).

If there is a problem with remote debugging, refer to troubleshootling.

Setting up Android devices

Please follow the instructions below to set up your Android device:

1. Turn on the USB debugging option

On your Android device, go to Settings > Developer options.

Setting developer options for a page

Note: In Android 4.2 and later versions, the developer options are hidden by default. To enable developer options, select Settings > About phone and click Version number 7 times.

In the developer options, select the USB debug check box.

Enable USB debugging on Android

A warning will then be asked if you want to turn on USB debugging mode. Select OK.

2. Connect your device

Connect your Android device and computer with a USB cable.

Note: If you are developing under Windows, you will need to install drivers for your Android device. Refer to the OEM USB Drivers on the Android developer website for details.

Find your device in Chrome

After setting up remote debugging on your Android device, find your device in Chrome.

In Chrome on the computer side, enter Chrome://inspect in the Address bar. After entering confirm Discover USB devices has been checked:

* * Hint * *: You can also enter Chrome://inspect from Chrome menu > More Tools > Inspect Devices

On your device, a warning will pop up to let you know if you want to allow USB debugging on the computer side. Select OK.

Tip: If you want to stop popping the tube hint in the future, tick always on to computer

Note: When you are debugging remotely, Chrome will prevent your device from going into hibernation. This feature is useful for debugging, but lacks security. So in the commissioning of the time to pay attention to your phone!

On the computer side, after you open the tab and enable Webviews debugging, the Chrome://inspect page displays all connected devices.

Show off from Chrome://inspect, too. View Connected devices

If you're having trouble finding your device from the Chrome://inspect page, refer to the Troubleshooting section.

Debugging a remote browser

On the page chrome://inspect, you can load DevTools and debug your remote browser.

To start debugging, click Inspect under the Browser tab that you want to debug.

Then your computer will load the new DevTools. On the new DevTools, you can interact with the selected browser in real time on your Android device.

Debug a webpage on your Android phone with DevTools on your computer

For example, you can use DevTools on your device to monitor page elements:

• When your mouse hovers over an element in the Elements panel, DevTools displays the relevant elements on your device.
• You can also click on the review element and then click on the device's screen, and DevTools will highlight the selected element in the Elements panel.

Note: The Chrome version of your device will determine the version of DevTools in remote debugging. For this reason, the DevTools you use for remote debugging may not be the same as what you normally use.

Debugging Tips

Here are some tips for using the Remote debugging feature:

• Press F5 (or on Mac Cmd + r ) to reload the remote page.
• Leave the device's network open. Use the network panel to view the status of your actual mobile device's traffic.
• Use the Timeline panel to analyze the submission data and CPU usage status. Programs that run on mobile devices are usually slower than those running on the development machine.
• If you are running on a local Web server, use port forwarding or virtual host mapping technology to let your device access your site.

Debug Webviews

In Android 4.4 and later, you can use DevTools to debug the content of WebView in your native Android app.

To configure Webviews as a debug state

Your application must allow debugging WebView. To turn on WebView debugging, call the static function setwebcontentsdebuggingenabled inside the WebView class.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {     WebView.setWebContentsDebuggingEnabled(true);}

This setting will take effect for all WebView in the app.

Tip: WebView debugging is not affected by the Debuggable label State of the manifest file in your app. If you want to enable WebView debugging only when Debuggable is true, test the status of the label at run time.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {    if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE))    { WebView.setWebContentsDebuggingEnabled(true); }}

Open WebView in DevTools

The Chrome://inspect page displays all the WebView that can be debugged on the device.

To start debugging, click on the inspect below the WebView you want to debug. Next, use the DevTools as you would with the Remote browser tab.

Use Chrome DevTools to debug remote Android Webview

The gray pictures listed in WebView represent their size and the size of the screen relative to the device. If your WebView has a set name, its name is also listed.

Real-time screenshot screen

It is quite inconvenient to constantly divert attention between two screens. Screencast Displays the screen of your device to the right of DevTools on the development machine. You can also interact with your device in screencast.

The KitKat 4.4.3,screencast can be used either for browser tabs or for Android WebView.

Turn on a screenshot session

To turn on Screecast, click the screencast icon above the right side of the Remote debugging window.

Screecast icon

The Screencast panel opens on the left and displays the real-time status of the device screen.

Interact with your Android device in real time on your PC

The screenshot will only display the page content. The transparent part of the screenshot covers the multifunction box, the device keypad, and other device interfaces.

Note: Because screenshots capture frames continuously, there is a performance overhead. If your test is frame rate sensitive, it is best to disable the screenshot.

Using screenshots to interact with devices

When you use a screenshot to interact, the click is converted to a touch screen, triggering the appropriate touch event on the device. Computer-side buttons are sent to the device, so you can avoid typing with your thumb.

Other DevTools work can also be used on screenshots. For example, to check the elements, click on the Inspect element and click inside the screenshot to see the corresponding section of the Web page source code.

To simulate a zoom gesture, hold down when you drag the mouse Shift . To scroll through the page, use your trackpad or mouse wheel, or you can drag the mouse pointer.

Port forwarding

Your phone may not always be able to connect directly to the server you are developing. They may be in a different network environment, and you may also be developing under a limited corporate network.

Port forwarding on Chrome for Android makes it much easier to test the sites you develop on mobile devices. This works by creating a listening TCP port on your mobile device that maps to a specified TCP port on your development machine. The traffic between these ports is transmitted via USB, so the connection does not need to depend on your network environment.

To enable port forwarding:

1. Open the Chrome://inspect on the machine you are developing.
2. Click Port Forwarding. The following is the Port forwarding settings page.
   
3. After device port, enter the port number that your Android device wants to listen on (the default is 8080).
4. Enter the IP address (or host name) and port number of your Web app's running environment after host.
5. Check to see if the Enable port forwarding is checked.
6. Click Done to complete the setup.

Port forwarding Settings

When port forwarding is turned on successfully, the port status of the Chrome://inspect page will be displayed in green.

Use port forwarding to view local pages on your Android device

Now you can open a new Chrome for Android tab and view the contents of the local server on your device.

Virtual Host Mappings

Port forwarding is very effective when you are developing on a localhost domain. But there are some situations where you might need to be a yo-Hi custom local domain name.

For example, suppose you are using a third-party JavaScript SDk that only works on a whitelist domain name. So you need to add an entry point to your port file, such as 127.0.0.1 production.com. Or you need to set a specific domain name on your Web server through a virtual host.

If you want your phone to be able to access the content on your custom domain, you can combine port forwarding and proxy server technology. The agent maps requests from the device to the appropriate location on the host.

Using port forwarding on an agent

Virtual host mapping requires you to open a proxy server on the host. All requests from your Android device will be sent to this agent.

To use port forwarding on an agent:

1. Install agent software on the host, such as Charles proxy or Squid.
2. To run the proxy server, remember the port number used by the server.
   Note: The proxy server and the server you are developing must be running on a different port.
3. In the Chrome browser, go to Chrome://inspect.
4. Click Port Forwarding. The following is the Port forwarding settings page.
   
5. After device port, enter the port number that your Android device wants to listen on. Use an Android-enabled port, such as 9000.
6. Enter localhost:xxxx at Host, where XXXX is the port number your proxy server occupies.
7. Check to see if the Enable port forwarding is checked.
8. Click Done to complete the setup.

Port forwarding for proxy servers

Set up a proxy on your device

Your Android device needs to interact with the proxy server on the host.

To set up a proxy on your device:

1. Select Settings > WiFi.
2. Tap and hold the network you're currently connected to.
   Note: The proxy settings apply to all networks.
3. Click Modify Network.
4. Select Advanced Settings.
   The proxy Settings page is as follows:
   
5. Click the Agent menu and select Manual.
6. Enter localhost at the proxy host name.
7. Enter 9000 at the proxy port number.
8. Click Save.

With these settings, your device will send all of its requests to the proxy server. The agent makes a new request on behalf of your device, so requests for your local domain name will be properly parsed.

Now you can load the local domain name on Chrome for Android as you would on the host.

Use virtual host mapping technology to access specific local domain names on your Android device

Tip: To return to normal browsing mode, restore the proxy settings on the device after disconnecting.

FAQ I can't see my device on the Chrome://inspect page

• If you're developing under Windows, make sure you've installed the driver for your device. The OEM USB Drivers on the Android Developer website is available for reference.
• Verify that your device is connected to your console, either directly or through a hub.
• Verify that the USB debug mode on the device is not turned on. Remember to choose Yes when prompted to allow USB debugging.
• Open the Chrome://inspect on your computer and confirm that the Discover USB devices is checked.
• Remote debugging requires that the version of Chrome on your computer is higher than the Android device. Try using Chrome Canary (mac/windows) or the Dev Channel release (Linux).

If you still can't see your device, disconnect the device from the console. Then on your device, open the Settings > Developer options. Select Revoke USB debug authorization. Then try to set up the device again and find the device in Chrome.

I can't see my browser tab in the Chrome://inspect page

• On your device, open the Chrome browser and go to the page you want to debug. Then refresh the Chrome://inspect page.

I can't see my WebView on the Chrome://inspect page.

• Verify that the WebView debug mode is enabled in your app.
• On your device, launch the app and open the WebView you want to debug. Then, refresh the Chrome://inspect page.

I can't access the Web server on my Android device

• If the network throttling condition prevents your device from connecting to a development server, try port forwarding or virtual host mapping.

Finally, if remote debugging still doesn't work, you can use the ADB binary package in the Android SDK to restore your workflow to its nearest state.

For more information remote debugging and ADB

You should not set the ADB or ADB plugin on the Remote Debugging Browser tab and WebView. Remote debugging on Android is now part of the standard Chrome DevTools. It can be used on all operating systems: Windows,mac,linux and Chrome OS.

If you're having trouble using remote debugging, you can try out the traditional workflow with the ADB binary package provided by the Android SDK.

Note: The connection between your Android device and Chrome may interrupt the ADB connection. Before establishing the ADB connection, uncheck the Discover USB devices on the chrome://inspect.

[Go] Use Chrome remote debugging on your Android device