Mobile front page and chrome remote real-computer debugging

The first few days just start new phone Xiaomi 5, the system really smooth ah. Why buy Millet 5, because to improve productivity ah, good play mobile front-end development AH haha

So the question is, how do you debug the front-end page on your phone?

A long time ago, my practice is: on the PC with the Chrome Mobile Simulator debugging, basic OK, and then the relevant files to the mobile phone, on the real computer test to prevent special problems arise.

This main has two shortcomings: one is the trouble of transmission, the data volume is more troublesome, and the second is only to display the page test, can not do real debugging, testing problems have to be re-transmitted.

Now, my practice is: with the PC-side chrome and mobile phone chrome connection, through a data line, the remote debugging of the real machine.

This improves the above shortcomings, although there may be other shortcomings, but at present, to cope with the general mobile debugging, should be enough.

Next, through the Xiaomi 5, explain the preparation process of this debugging program

First, the PC to prepare a new version of Chrome, mobile phone side ready to move Chrome version

Second, the mobile phone developer options Open, wherein the USB debugging open

Third, through the data cable Connection PC, my is Win7 X64 system, Apple Mac should also be able, this step is to install the phone driver

Win7 default connection will automatically install the appropriate driver, if the installation is not successful, you can use a third-party phone assistant, they will also help you install, or manually installed yourself

For example, Xiaomi 5 auto-install driver is successful, but the ADB interface has a problem, in the Device Manager can see the exclamation point, so manually installed:

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

After the successful download, unzip the package, such as/driver directory form, manual installation, open the Device Manager, if the driver and OK can ignore the next step

If the ADB interface has an exclamation point, right-click to update the driver and follow the steps

My driver is ok so it appears

If the driver has a problem, choose to install from disk, select the corresponding INF file in the/driver directory, and install it.

Finally, it's OK to grow like this.

The steps to drive the installation, Apple Mac's principle is similar, but also to ensure good driver support.

Four, determine the PC-side chrome and mobile chrome connection, for debugging

PC-Side Open chrome://inspect/#devices, you can see, no device found

Data cable to the phone, (select Allow device Debug) to see the device

This allows the PC side and the mobile side to synchronize, such as the input box to enter a URL to jump

In the mobile chrome you can see the page has been updated, select the Inspect option, the review element, you can pop up the debug window

1 location can customize link updates

The 2 location is a map of the pages in your phone's chrome, so you can review the elements directly on this map, as shown in 3

4 the location control needs to be mapped, and if unchecked, the map is canceled and the element can be reviewed on the phone.

5 position can be set in the corresponding

Five, port forwarding function, to implement local/server-related page debugging

The above mentioned debugging is only the basic function, can only debug the server (specific link) on the page, if you want to debug the local paging file it?

I wrote a local file to debug, the result is access denied

The workaround is to configure a local server, and then pass port Forwarding to enable debugging of related pages

Like this, configure the ports that are available for port forwarding

Or enter the configuration from here

Configure the port on the local server (I used the wampserver, I used the Apache server

After the Apache port is set to 8080, the PC-side access is successful, sync to the phone, the mobile phone is also successfully accessed, then you can debug

Mobile front page and chrome remote real-computer debugging