When developing mobile terminals, we often use the emulator that comes with chrome to simulate various mobile devices. But the simulation is a simulation after all. When the development is completed, how to debug when there is a problem with accessing the page using the real machine?
Here are 2 debugging methods for android machines
1. Use the Chrome browser directly:
1. Enter the site to be debugged in the browser, and F12 opens the debug window;
2. Select different types of equipment for debugging as needed;
2. Use the real machine to debug the mobile phone:
1. Install the latest version of chrome on both pc and android phone;
2. Use usb to connect the phone's PC;
3. Open "Settings" -> "Developer options" -> "USB debugging" in the phone
4. Open chrome on the PC side, enter chrome://inspect/#devices in the address bar and select discover usb devices. You can see our mobile device as shown below:
5. Visit the page in the chrome on the mobile phone side. For example: https://test.lifeccp.com/m/ If it is synchronized, we will see the page visited on the mobile phone side on the chrome on the pc side, as shown in the following figure
6. Click inspect in the image above, and the familiar debugging interface will appear!
In the debug window select More tools --> Inpect devices...
Open Inspect on the following page:
Pay attention to the mobile phone icon in the upper right corner of the figure. After clicking, the displayed content of the PC and the mobile phone is the same. The page opened by the mobile phone is directly pulled to the PC for display. Debugging is more efficient!
For more information, you can refer to the official Chrome help: https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3