Remote Debugging on Android

Source:

http://www.seejs.com/archives/296

Directory

• Remote Debugging Overview
• Use Chrome's ADB Extensions for remote debugging
  • 1. Installing ADB Extensions
  • 2. Enable the USB debugging feature on your mobile device
  • 3. Connect your PC and mobile device via USB
  • 4. Start debugging with ADB extensions
  • 5. Debug your Application
  • Attention
• Port reverse forwarding (experimental)
  • 1. Connect your mobile device
  • 2. Enable Port reverse Forwarding
  • 3. Add a port forwarding rule
  • 4. Benefits

Note : For the interactive protocol information we use in remote debugging, see the Debug protocol documentation and Chrome.debugger.

Remote Debugging Overview

The user experience of Web content on mobile devices is significantly different from that of a desktop type. Google Chrome DevTools has a set of tools you already know that allows you to inspect, debug, and analyze on mobile devices, which means you can use Chrome on your development machine Devtools to debug a page that is open on a mobile device. As long as your mobile device is connected to the development machine via USB, you can start debugging, and you can view and even modify the structure, scripts and styles until you get a bug-free page that behaves perfectly on all devices. When you debug a Web application on your development machine, you can use port reverse forwarding to allow a mobile device to access a website from the development machine via USB. Port reverse forwarding requires the development machine to install Chrome 29 or later, and requires a mobile device to install Chrome 28 or later.

Use Chrome's ADB Extensions for remote debugging

Before you start debugging, you need to make the following preparations:

• An Android phone or tablet with a chrome 28 or later browser installed.
• A USB cable (Windows users will also need to install the appropriate USB device driver).
• 29 or later versions of Chrome have been installed on your development machine.
• The ADB extension for Chrome has been installed on your development machine.

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

1. Installing ADB extensions

The ADB extension simplifies the setup process for remote debugging. The ADB extension contains Android debug Bridge (ADB), which allows you to debug your mobile device via USB on your development machine. This extension provides the following benefits:

• Includes ADB, so you don't need to install the full version of the Android SDK.
• Provides a UI for easy control to start and stop the ADB daemon, and to view the devices in the connection.

The installation process for the Chrome Web store does not work correctly in Windows 8. If you encounter any problems during the installation process, you can view the details of how to download and install the extension in the reply to the ADB extension on GitHub.

2. Enable the USB debugging feature on your mobile device

In order to be able to debug via USB, you need to set up your Android device for the development environment. Follow the wizard prompts to enable the USB debugging feature on your mobile device, and the system will detect your device. To enable USB debugging:

• In most devices running Android 3.2 or earlier, you can find the following options "Settings" > "Apps" > "Development Environment".
• In Android 4.0 and later, it is "Settings" > "Developer Options".
• On Android 4.2 and later, the developer options are hidden by default. Go to Settings > About phone and follow the prompts to click on the version number until the developer options is turned on. Go back to the previous screen to find developer options.

If you are doing development on windows, you need to install the relevant USB driver for your mobile device. Refer to the OEM USB Drivers on the Android developer website. For more information, please see Setting up a Device for development posted on the Android developer website.

3. Link your mobile device via USB

1. Connect your development machine with a USB cable and move is to be.
2. On your mobile device, start chrome. Open Settings > Advanced > Development tools to confirm the startup of USB Web page debugging:

When you connect your device to the development machine, you may see a warning on your mobile device to request USB debugging permissions on the computer.

To avoid seeing this warning every time you debug, select "Always allow requests from this computer" and click OK.

4. Start debugging with ADB extensions

When the ADB extension is installed, a gray Android menu icon will appear next to the Chrome menu. To start debugging:

1. Click on the Android icon, then click "Start adb".
   
   Once the ADB starts successfully, the menu icon turns green and if a device is already connected, the number of currently connected devices is also listed.
   
2. Click "View detection Target" to open the about:inspect page, where each connected device and its tabs are listed.
3. To find the Device tab that you want to debug, click View connection next to its URL.

If you don't see any connected devices:

• Check that your device is connected to USB.
• Confirm that your device is listed as available by sending the ADB devices command. If not, check that your device's USB debug mode is enabled.
• Confirm that the USB debugging feature is enabled in Chrome for Android.

5. Debug your App

For example, looking at the elements of your selected page, the page structure for that element in Chrome on your mobile device is immediately highlighted. Similarly, scripting or executing commands in the Devtools console will affect the pages that are checked in your device. You can also use all other panels, such as timeline and profiles.

Attention

• You may notice that you have access to a different version of the Devtools on your development machine during the remote debugging process. This is because the tool synchronizes the version of Chrome that is used on Android devices.
• Because we connect the computer via USB, you can keep your device in a real network and view the network waterfall stream under real-world conditions in the network panel.
• Hardware on mobile devices running your Web page is usually slower than your PC, so use the timeline panel to analyze how to optimize rendering and CPU for best results.
• If you are running a Web server on your development machine and the network restrictions prevent your mobile device from sending requests to this server, see reverse port forwarding.

Port reverse forwarding (experimental)

Similarly, you have a Web server running on your local development machine, and you want to access this site from your mobile device. This is simple if your mobile device and your development machine are in the same network environment. However, this can be difficult in some situations, such as in a restricted enterprise network. A new feature called "Port reverse forwarding" in the Android version of Chrome makes the problem simple. It maps to a specific TCP port on your development machine by establishing a listening TCP port on your mobile device. The flow of information through the forwarding port is transmitted via USB, so it is not dependent on the network configuration of the mobile device. To use this feature, you need to prepare the following:

• Install Chrome 29 or later on your development machine.
• Install android Debug Bridge (Chrome adb extensions or full version of the Android SDK) on your development machine.
• Install the Android version of Chrome 28 or later on your mobile device.

The secondary procedure assumes that you already have a remote debug configuration as described in debugging with the ADB Chrome extension.

1. Link your mobile device

1. Connect your device and develop the machine via USB.
2. Stop all the examples that are currently running under Chrome on the mobile side.
3. Open the Android version of Chrome.
4. Go to Settings > Developer tools and turn on USB Web debugging.
5. To open the ADB on your development machine:
   • If you are using ADB extensions, click the ADB icon and then click Start adb. You should see the icon turn green and show the total number of connected devices.
   • If you do not use an extension, open a terminal and execute the ADB devices command. You should be able to see a list of the IDs of connected devices.

2. Enable Port reverse Forwarding

Perform the following steps on your development machine:

1. Open about:flags, turn on enable Developer Tools experiments, and then restart Chrome.
2. Open about:inspect. You should be able to see your device and the tab it opens.
3. Click Inspectnext to any of the listed sites.
4. In the Devtools window that opens, open the Settings panel.
5. In experiments , check the Enable reverse port forwarding.
6. Close the Devtools window and go back to about:inspect.

3. Add a port forwarding rule

1. Click the Inspect link again to open devtools, and then open Settingsagain. You should be able to see a Port forwarding tab.
2. Click Port Forwarding.
3. In the Device port input box, enter the port number that the Android device needs to listen on (default is 8080).
4. In the destination input box, append the port number to the localhost running your application.

4. Benefits

In Android Chrome, open the localhost:< device port number >,< device Port number > is the value you fill in the Device Ports input box (default is 8080). You should be able to see the contents of the server on your development machine.

Prior to Chrome 29, there was no full port reverse forwarding capability. If you're having problems with port reverse forwarding, make sure you're using Chrome 29 or later. If the port forwarding rule appears to have no effect, add a second rule, and the copy port forwarding rule can sometimes solve some of the problems in earlier versions of Chrome.

Original address: Remote debugging on Android

Remote Debugging on Android