学步园

• Remote
  debugging overview
• Remote
  debugging with the ADB Chrome extension
  • 1.
    Install the ADB extension
  • 2.
    Enable USB debugging on your device
  • 3.
    Connect your device via USB
  • 4.
    Start debugging with the ADB extension
  • 5.
    Debug your Application
  • Notes
• Reverse
  Port Forwarding (Experimental)
  • 1.
    Connect your mobile device
  • 2.
    Enable reverse port forwarding
  • 3.
    Add a port forwarding rule
  • 4.
    Profit

Note: For information on the interaction protocol we use for our remote debugging, please see the Debugger
Protocol documentation and chrome.debugger.

Remote debugging overview

The experience of your web content on mobile operates very differently than what users experience on the desktop. The Google Chrome DevTools allow you to inspect, debug, and analyze the on-device experience with the full suite of tools you're used to, meaning
you can use the Chrome DevTools on your development machine to debug a page on your mobile device.

Debugging occurs over USB and as long as your mobile device is connected to your development machine, you can view and change HTML, scripts and styles until you get a bug-free page that behaves perfectly on all devices.

When debugging a web application served from your development machine, you can use reverse
port forwarding to allow the mobile device to access a site from the development machine over USB. Reverse port forwarding requires Chrome 29 or later on the development machine, Chrome 28 or later on the mobile device.

Remote debugging with the ADB Chrome extension

To start debugging, you need:

• An Android phone or tablet with Chrome
  for Android 28 or later installed from Google Play.
• A USB cable to plug in your device. (Windows users will also need to install an appropriate
  USB device driver.)
• Chrome 28 or later installed on your development machine.
• The ADB Chrome
  extension installed on your development machine.

Note: If you are already using the legacy remote debugging workflow, or are using an earlier version of Chrome, see Remote
Debugging on Android (Legacy Workflow).

1. Install the ADB extension

The ADB Chrome extension simplifies the process of setting up remote debugging. The ADB extension includes the Android Debug Bridge (ADB), which lets you debug the device over USB from your development machine. The extension provides the following benefits:

• Includes ADB so you don't have to install the full Android SDK.
• Provides a UI for easily starting and stopping the ADB daemon, and viewing connected devices.

 Install
the ADB Chrome extension

The Chrome Web Store installation process does not work on Windows 8. If you have any trouble installing from the Chrome Web Store, see the ADB
extension repo on github for details on how to download and install the extension manually.

2. Enable USB debugging on your device

In order to debug over USB, you need to setup your Android device for development. Enable USB debugging on your device then system to detect your device as mentioned in the guide.

To enable USB debugging:

• On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development.
• On Android 4.0 and newer, it's in Settings > Developer options.
• On Android 4.2 and newer, Developer options is hidden by default. To make it available, go to Settings > About phone and tap Build number seven times. Return to the previous screen to find Developer options.

If you are developing on Windows, you need to install the appropriate USB driver for your device. See OEM
USB Drivers on the Android Developers site.

For more information see Setting
up a Device for Development on the Android Developers site.

3. Connect your device via USB

1. Connect your mobile device to the development machine using a USB cable.
2. On the mobile device, launch Chrome. Open Settings > Advanced > Developer Tools and check the Enable USB Web debugging option as shown here:
   

When connecting your device to your development machine, you may see an alert on the device requesting permission for USB debugging from this computer.

To avoid seeing this alert each time you debug, check Always allow from this computer and click OK.

4. Start debugging with the ADB extension

When the ADB extension is installed, a gray Android menu icon appears beside the Chrome menu.

To start debugging:

1. Click the Android icon, then click Start ADB.

   

   Once ADB has started, the menu icon turns green and displays the number of currently connected devices, if any.

   

2. Click View Inspection Targets to open the about:inspect page that displays each connected device and its tabs.
3. Find the mobile device tab you want to debug and Click the inspect link next to its URL.

If you don't see any connected devices:

• Check that your device is connected to USB.
• Ensure your device is listed as available by issuing the adb devices command. If not,
  check that you have USB debugging enabled on your device.
• Ensure that USB debugging is enabled in the Chrome for Android settings.

5. Debug Your Application

For example, inspect an element in the page you have selected and the element highlights in Chrome mobile on your device in real time.

Similarly, editing scripts or executing commands from the DevTools console affects the page being inspected on your device. You can also also use all of the other panels, such as Timeline and Profiles.

Notes

• You may notice that the version of the DevTools you have access to during remote debugging differs to the version you have running on your development machine. This is because the tools are synchronized with the Chrome version on the Android device being used.
• Because we're connected over USB, you can keep the device on a real cellular network, and view the network waterfall in the Network panel under actual network conditions
• The hardware on mobile devices often runs your content much slower, so use the Timeline to
  analyze how to optimize rendering and CPU for the best effect.
• If you're running a web server on your development machine, and network restrictions prevent your mobile device from accessing the server, see reverse
  port forwarding.

Reverse Port Forwarding (Experimental)

Commonly you have a web server running on your local development machine, and you want to connect to that site from your device. If the mobile device and the development machine are on the same network, this is straightforward. But this may be difficult in
some cases, like on a restricted corporate network.

A new feature in Chrome for Android called "reverse port forwarding" makes this simple to do. It works by creating a listening TCP port on your mobile device that maps to a particular TCP port on your development machine. The traffic through the forwarded port
travels over USB, so it doesn't depend on the mobile device's network configuration.

To use this feature you need:

• Chrome 29 or later installed on your development system
• Android Debug Bridge (Chrome ADB extension or full Android SDK) installed on your development system
• Chrome for Android 28 or later installed on your device

This procedure assumes that you already have remote debugging configured as described in Remote
debugging with the ADB Chrome extension or

1. Connect your mobile device

1. Connect your device to your development machine over USB.
2. Stop all instances of Chrome currently running on the mobile device.
3. Open Chrome for Android.
4. Go to Settings > Developer Tools, and turn on Enable USB Web Debugging.
5. Start ADB on your development machine:
   • If you're using the ADB extension, click the ADB icon and click Start ADB. You should see the icon turn green and display a number indicating the number of devices connected.
   • If you're not using the extension, open a terminal and run adb devices. You should see the IDs of your connected device(s) listed.

2. Enable reverse port forwarding

Perform the following steps on Chrome on your development machine:

1. Open about:flags, turn on Enable Developer Tools experiments and restart Chrome.
   
2. Open about:inspect. You should see your mobile device and a list of its open tabs.
3. Click Inspect next to any of the sites listed.
4. In the DevTools window that opens, open the Settings panel.
5. Under Experiments, turn on Enable reverse port forwarding.
   
6. Close the DevTools window and return to about:inspect.

3. Add a port forwarding rule

1. Click the Inspect link again to open DevTools, and open Settings again. You should see a new Port forwarding tab.
2. Click Port Forwarding.
3. In the Device port field, enter the port number the Android should device listen on (defaults to 8080).
   
4. In the Target field, append the port number where your web application is running on localhost.

4. Profit

In Chrome for Android, open localhost:<device-port-number>, where <device-port-number> is the value you entered in the Device port field (default is 8080). You should see the content being served by your development machine.

Prior to Chrome 29, reverse port forwarding was not fully functional. If you experience issues with reverse port forwarding, make sure you're using Chrome 29 or later. If the port forwarding rule doesn't appear to be taking effect, adding a second, duplicate
port forwarding rule sometimes resolves the issue in earlier versions of Chrome.

https://developers.google.com/chrome-developer-tools/docs/remote-debugging?hl=zh-CN&csw=1