Chrome Inspect remote commissioning: Chrome on Android One of the normal debugging

PC environment in this article:

Chrome: Version 33.0.1750.22 dev

MAC Os:os X 10.9.1

Special attention: Chrome DEVTOOLSL will be joined to appspot.com when used, and this URL is the wall, the following tutorials need to be used in this machine first-wall agent, otherwise in Chrome://inspect can not click the page inspect link open deleloper Tools.

Use Goagent tutorial on Mac: http://maolihui.com/goagent-mac-detail.html

How to use goagent on other operating systems please Google yourself

• For Web pages: Android 4.0+, and install Chrome on your Android device.
• For Android apps:android 4.4+ and debug do the required Page view configuration
• USB cable for access to your Android device
• Installation of Chrome32 later on the development device
• You still need FQ in China.

How to not use the proxy (this IP is not blocked), in the hosts configuration: 203.208.46.178 chrome-devtools-frontend.appspot.com

Pre-conditions:

1. Install chrome 31 or later on the PC (Mac\windows\linux).

2, if it is windows, you need to install the USB device driver, used to connect Android mobile phone or pad, for Mac, Linux is installed. (Peas or phone assistant can be installed on Windows, and the corresponding USB device driver will be automatically detected and installed after connecting the phone with a USB cable)

3, the success of the flip-wall, you can open appspot.com in Chrome.

Remote Debugging Overview :

The user experience of Web content on mobile devices is significantly different from that of a PC. Google Chrome DevTools has a set of familiar tools that allow inspect, debug, and analyze on mobile devices, which means you can use Chrome DevTools on your PC to debug a page that's open on a mobile device.

As long as the mobile device is connected to the PC via USB, you can start debugging, view and even modify html,script and CSS until you get a bug-free page that is perfect for all mobile devices.

Before you start debugging, you need to prepare the following:

o an Android phone or tablet with chrome 31 or later installed. (Beta version V32 requires Adb-free connectivity) (the actual 30 version is also available, again the old version has not been tried)

o A USB cable (Windows users will also need to install the appropriate USB device driver first).

31 or later versions of Chrome have been installed on the OPC, and the wall has been successfully accessed www.appspot.com.

1. Enable USB debugging on mobile devices

In order to be able to debug via USB, you need to set up Android mobile device for the development environment.

To enable USB debugging:

O In most devices running Android 3.2 or earlier, you can find the following options "Settings" > "Apps" > "Development Environment". But Chrome seems to be available only in Android 4.0 or more, so this is no longer a control.

O in Android 4.0 and 4.1, it is "Settings" > "Developer Options".

O on Android 4.2 and later, the developer options are hidden by default. Go to Settings > About phone and follow the prompts to click the version number 7 times until the developer options is turned on. Go back to the previous screen to find developer options.

2.1 Direct-connect mobile device via USB

Chrome M32 and above (refers to PC):

For these versions of Chrome, Devtools supports native USB debugging for connected devices. It is no longer necessary to view the chrome and WebView connection instances on mobile devices by configuring ADB or ADB plugin (the way older versions are).

Access About:inspect in Chrome, and check "Discover USB Devices" is checked.

Note: This description applies to Mac and ChromeOS desktops, and Windows users also need to install device drivers to enable communication between devices.

Note: This USB direct method between PC chrome and mobile device may interrupt an "adb connection" and you may try to reestablish the connection. If for other reasons you need to use the ' adb ' command, before executing ' adb devices ', uncheck the "Discover USB devices" checkbox, unplug the device, and plug it back in.

Chrome M31 and earlier: (refers to PC)

Older versions of Chrome still require ADB chrome extensions to remotely debug devices. (deprecated, not covered in this article)

2.2. Connect to mobile devices

Connect your mobile device to your PC with a USB cable.

When a mobile device is connected to a PC, it may be seen on the mobile device that the device on the PC requests permissions on the USB debug alert. To avoid seeing this alert every time you debug, check always allow from this computer, and then click OK.

On your mobile device, start chrome. Open "Settings" > "Advanced" > "Development tools" to confirm the startup of USB Web page debugging (no settings or this setting) for the above version:

Now the PC opens Chrome, "Chrome menu > Tools > Check Device" and see all connected devices, the interface is as follows:

If this menu is not available because of the chrome version, you can also enter About:inspect in the Chrome address bar on your PC.

This page displays each connected device and its tabs. You can connect multiple devices at the same time and open different versions of Chrome on different devices, and debugging Webviews also appears below the page.

Find the tab of interest and click the Inspect link to open devtools. The page can also be re-loaded at this interface, with the page in front or close. Finally, you can open a new link on your device through a text input box.

Troubleshooting:

Check the developer options on the device →usb debugging is checked.

If you want to use the native USB debugging feature, check that Chrome is 32 or later.

If USB debugging is turned on, but About:inspect does not display the desired device, check to see if the Discover USB devices is checked. If there is a checkmark, unplug the device and try to undo the developer options for the USB authorizations and try again.

To debug an application:

For example, viewing an element in a selected page, the page structure for that element in Chrome on a mobile device is immediately highlighted.

Similarly, scripting or executing commands in the Devtools console affects the pages that are checked on the mobile device. You can also use all other panels, such as timeline and profiles.

Attention:

O You may notice that you have access to a different version of the Devtools on your PC during the remote debugging process. This is because the tool synchronizes the version of Chrome that is used on Android devices.

o because we connect the PC 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.

o 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.

o If you are running a Web server on your PC and your network restrictions prevent your mobile device from sending requests to this server, see reverse port forwarding.

Ochrome Browser prevents the mobile device screen from entering hibernation while remote debugging. Although useful, it can reduce the security of the device.

Screencast:

Screencast can experience the screen mapping of a mobile device to a PC. This allows you to switch between the mobile device and the PC Devtools without going back and forth. Currently, the Chrome for Android beta version (M32) supports this feature.

Click the PC devtools toolbar to open the Screencast panel and display the mobile device's screen on your PC. When browsing, clicking, Scrolling, the screencast panel will display the live view on the mobile device.

When using the Screencast feature, you can control Chrome's forward and back buttons on your mobile device, reload it, and directly change the URL and load it.

Interacting with screencast:

There are several ways to interact with the screencast of your mobile device.

The key action on the PC keyboard will be sent to the mobile device

Click the event that will be sent to the mobile device as appropriate for the touch.

Scroll the mouse wheel and touch the trackpad.

Select the Magnifier on the toolbar or press command+ shift+ c to check the element

Note: The screenshot feature repeatedly captures the device for real-time access to the mobile device, but with a performance overhead. If you are testing a performance-sensitive situation, you can suppress the screenshot.

Chrome Inspect remote commissioning: Chrome on Android One of the normal debugging