Debugging of the Mobile front-end page and Chrome remote real machine, chrome real machine

Debugging of the Mobile front-end page and Chrome remote real machine, chrome real machine

I haven't seen it for a year, and my blog garden has grown ......

 

Just a few days ago, I started my new mobile phone.Xiaomi 5The system is really smooth. Why do we need to buy Xiaomi 5? Because we need to improve productivity, so we should have a good time with Mobile front-end development.

So the question is, how can I debug the front-end page on the mobile phone?

A long time ago, my practice was: After debugging with Chrome mobile simulator on a PC, I basically got OK, and then uploaded the relevant files to my mobile phone. I tested it on a real machine to prevent special problems.

There are two main disadvantages: one is the trouble of transmitting data, which is even more troublesome if the data volume is large, and the other is that you can only view the page for testing and cannot perform real debugging, if the test fails, you have to re-upload it.

Now, my practice is to use Chrome on the PC end to connect to Chrome on the mobile phone end and use a data line for remote debugging on the real machine.

This improves the shortcomings mentioned above. Although there may be other shortcomings, it should be enough to cope with general mobile debugging.

 

Next, we will use Xiaomi 5 to explain the preparation process of this debugging solution.

 

I. Prepare a new version of Chrome on the PC side and a new version of mobile Chrome on the mobile phone side.

2. Enable the mobile phone developer option, and enable USB debugging.

 

 

3. Connect to the PC through the data cable. I use Windows 7x64, and Apple MAC should also be able. This step is to install the mobile phone driver.

The corresponding driver is automatically installed when Windows 7 is connected by default. If the installation fails, you can use a third-party mobile assistant to install the driver for you, or manually install the driver on your own.

For example, if the driver is successfully installed in Xiaomi 5, but the ADB Interface has a problem, you can see the exclamation point in the Device Manager, so manually install:

Visit the Xiaomi official website, select download, and download the corresponding driver package,

After downloading the package, decompress the package, such as the/Driver directory, and manually install the package. Open the Device Manager. If the Driver and the Driver are OK, ignore the next step.

If there is an exclamation point at the ADB Interface, right-click to update the driver and follow the steps

My driver is OK, so it appears

If the Driver is faulty, choose to install it from the disk, select the corresponding inf file under the/Driver directory, and then install it.

Finally, it will be OK

The driver installation steps have come to an end, and Apple MAC works almost the same way, so you must ensure good driver support.

 

4. Determine the connection between PC-side Chrome and mobile-side Chrome for debugging

On the PC side, open chrome: // inspect/# devices. You can see that no device is found.

 

Connect the data line to the mobile phone (select allow device debugging) to see the device

In this way, the PC and mobile devices can be synchronized. For example, you can enter a url in the input box to jump

The page is updated in Mobile Chrome. Select the inspect option to review the elements. The debugging window is displayed.

1-position custom link update

The 2 position is the ing of pages in Mobile Chrome in PC, so that elements can be reviewed directly on this ing, as shown in figure 3.

4. Whether the location control requires ing. If unselected, The ing is canceled and elements can be reviewed on the mobile phone,

Settings can be made in position 5

 

5. port forwarding function to debug local/Server-Related Pages

The debugging mentioned above is only a basic function. You can only debug pages on the server (specific link). What if you want to debug local page files?

I wrote a local file for debugging and the result is Access denied.

The solution is to configure a local server and debug related pages through the Port Forwarding function.

Configure the port that can be used for port forwarding.

Or enter the configuration from here

Configure the port of the local server (I used wampserver and used Apache server)

After the Apache port is set to 8080, access from the PC is successful, synchronized to the mobile phone, and access from the mobile phone is successful. Then you can perform debugging.

 

 

Reference: Chrome Remote Debugging