Mobile front-end debugging scenarios (Android + Chrome for remote debugging)

One: Background
In general, the most common way to debug a mobile page is to switch the PC-side browser's useragent to simulate a phone or other mobile device Debug page and then use your phone to open the page you want to debug to refresh the page to see the debug results

But there are two problems in the PC browser analog phone may cause debugging not to use the phone directly debugging and one more step to refresh that how can be achieved in the PC-side modification code directly on the phone to see the results of the changes so that the WYSIWYG effect of what?

Two. function

Let's take a look at the results we want to achieve.

On the left is the PC-side Chrome Browser, on the right is the chrome on the phone and then you can see when the mouse moved to a DIV on the phone when the area highlighted the same as debugging a piece of code on the PC effect, you can modify the code and directly on the phone to feedback changes to the results

Three, prepare

In order to complete this bright SAO mobile debugging function We need the following preparatory work

1.PC End installs the latest chrome
2. Phone-side Install the latest chrome (Android )
3.USB Connection Cable

(feeling is not too simple)

Tip: Previous chrome If you need to install an adb plugin for this kind of debugging (requires FQ) but the latest Chrome has direct support for Android, so there's no need to install the ADB plugin on Chrome anymore. But you need to download the latest chrome

IV: Steps
Down we're done gradually
1. Suppose you have downloaded the latest chrome on your computer and downloaded the latest chrome on your phone

2.USB settings on your phone open USB debugging on the "Settings", "Developer Tools", "USB Debug". Because many of the Android phone models can not find "USB debugging this option where" and most of the mobile phone "developer Options" are hidden by default, you need to look at your phone instructions and then set the phone to "developer mode" to find "USB debugging"

3. Assume that you have set the phone to "USB debugging" turned on the status of the phone connected to the computer phone will pop up whether the link click OK

4. Open the computer chrome in the Address bar input chrome://inspect check Discover USB devices can detect your device can see monitoring to my device is M351 Meizu X3

5. Open Chrome on your phone

You can see the page that Chrome opens on your phone at this point, chrome on my phone doesn't have any web history on it. If we can see it in the Mobile Chrome browser input www.cnblogs.com, you can also Inspect the input box behind Chrome opens a link directly

6. Click Inspect if you see the beginning of the article the same effect now is to review the mobile phone page elements

7. You can click the small square icon in the upper right corner of the pop-up review element box to switch to view mode. The page that opens your phone will be pulled to the PC display

V: summary

Basically has been happy to complete the summary under the entire process: PC and Android phone download the latest chrome, in the phone settings, "USB debugging" open link to the computer open the computer chrome input Chrome://inspect Open the phone chrome input you want to debug the page click Inspect to start Debugging.

This is the original text on the Chrome developer FQ

Mobile front-end debugging scenarios (Android + Chrome for remote debugging)