How to remotely debug a Web site on an Android device via Chrome

Online posts a lot, but many are old version of, tried, no matter, spent a day, finally in this machine test passed, special record down to spare. If you need a friend, you can refer to it. Let's take a look at the effect of debugging on PC-side chrome:

On the left is the phone's analog operator, the right is familiar with the developer tools, you can also operate on the phone, the left side of the PC screen will be synced to the phone interface.

Let's talk about environment configuration:

1. Mobile phone, my phone is Huawei Glory 4,android4.4.4, very old mobile phone, we do not joke, but do not affect the experiment. Install the chrome version 58.0.3029.83;

2.PC Terminal, Win7 64-bit system, installs Chrome version 59.0.3071.86 (official version) (64-bit).

In fact, these are not the focus, the following is the most frustrating place, is the phone plug in the USB cable, the driving problem. The ADB driver failed to start and the ADB driver could not be found. Find a lot of articles on the Internet, can not solve the problem.

Now the driver to share here, the link address is: http://pan.baidu.com/s/1qYdPQGk password: ksw7, you can download the decompression, under Device Manager, find the driver failed yellow exclamation point, right-click Update Driver, Select the Unpacked folder, and the driver installation is completed automatically after the next step.

Well, it's a success in here. Boy, that's it, it took me half a day.

Next, you need to configure the phone USB debugging and PC-side chrome settings.

Turn on USB debugging for your Android device

Specifically how to open the developer options, you can Baidu, you can also refer here: http://jingyan.baidu.com/article/ca41422fe156241eae99eda5.html

There is a USB connection, I choose here is the PC Assistant, other models may be called different, we can all try.

After this is set up, the phone side basically does not need to set anything anymore. Then go back to the PC side.

Open the Chrome browser, F12 Open the Developer tool and follow the red circle:

Since I have successfully connected to the device, in the right remote devices, there is a display device name: chm-cl00, and the device status is connected. If this is the first connection, or if the connection is not successful, it will be the following:

This time, generally speaking, there will be a prompt on the phone whether to allow USB debugging. If you do not have this prompt, please try to unplug the USB cable, plug it in again, or follow the official mode of operation, revoke the USB debug license, then unplug the USB cable and try again.

The following is a USB debug authorization prompt:

Once authorized, on the right side of the developer tool, remote device displays the device connection successfully:

OK, so the next step is to start debugging.

Click on the Connected tab to display the device name on the right and the version number of Chrome on your mobile device. As shown in the following:

In the text box after the new tab, enter the website URL that we need to debug, for example: http://www.baidu.com, and then click the Open button, at which point the Baidu URL will appear under "Open new tab".

At this point, open the Chrome browser on the phone, and the Http://www.baidu.com website is automatically opened. At this point, in the PC-side developer tool, remote devices's Connected tab, clicking the Inspect button behind the http://www.baidu.com URL opens a new window, which is the interface for the remote debugging Android device we saw at the beginning.

OK, so the setup is done, and the next step is debugging.

I wish you success in the successful configuration!

Finally, in the configuration settings of the last Officer network, need FQ Oh, we all understand.

Https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?refresh=1

How to remotely debug a Web site on an Android device via Chrome