In the front-end development of the need for real-time testing and debugging, in addition to remote debugging, we can be in the local implementation of the phone debugging it? We typically use chrome to simulate the display of mobile devices, but there are still a lot of things that come up on mobile devices. So when it comes to responsive development, it's best to start with a mobile device
Real-Machine debugging。 First explain my environment: Win + Android phone + chrome (Desktop&app)
The first step: Connect your computer to your phone1. The mobile phone opens the "developer Options" Android phone into the "settings", "about the phone" and "version number" point 7 times (or other version number location, a test is sure to have ...) Then "developer Options" appears in "Settings". 2. The phone opens "USB debugging" to "developer Options", open "USB debugging" (if you want your phone to turn on and open "do not lock the screen") 3. Connect and allow debugging to connect your phone to your computer with a USB cable, "Allow this computer to debug" appears on your phone (may appear later, go to the second step first)
Step Two: Start your phone browsing with your computer1. Open Chrome's inspect in the computer Chrome address bar, enter chrome://inspect-> tick "Discover USB devices" If there is no accident in devices will appear in the phone model. If not, confirm the following: developer options, USB debugging, allow the computer to debug 2. The phone opens chrome in the Chrome app on your phone, where the URL will appear in chrome inspect. 3. Test the control of mobile browsing in the computer Chrome inspect input box randomly lose an online URL, click Open, Mobile phone chrome will open the page. With the computer chrome can control the refresh, close, but used to debug the inspect point open is blank, it should be wall.
Step three: Test your local page with your phone1. Turn on the local server pair, unfortunately mobile Chrome is not able to debug static pages. So we have to open a local server, fortunately there are now gulp+webserver, usage here does not speak. In short, after you finish this, you should use http://localhost on your computer to browse the Web. 2. PC Chrome turn on port forwarding in Chrome inspect midpoint "Port forwarding ..." with ports and localhost links (such as 8000 and localhost:8000), tick " Enable Port Forwarding "->done 3. Open your phone to browse localhost such as: Enter http://localhost:8000 point Open so that the phone can open the page.
Fourth step: Restore the Inspect function for debuggingWhat else can be done, Fq Bai.
How to use your phone for local front-end debugging
