I haven't used the Android phone for a long time, so I used the Android phone browser to visit the Xiaoshan blog, and suddenly found that there were some problems with the display of several sections. Because iPhone tests have always found no problems before, Android did not take the test. To solve this problem, we want to find a mobile debugging tool. I believe that those who have worked as front-end partners are familiar with web debugging tools and methods, such as Chrome developer tools, firebug, etc.
But now websites are focusing on mobile terminals. After looking for a long time, they found that the simplest and most convenient thing is to use Chrome's own mobile terminal simulator. Here we talk about how to use Chrome's own developer tools to debug mobile devices. One of the reasons why we recommend this method is that we are most familiar with it, Another is that this method does not need to install any software on the mobile device.
The specific operation steps of using Google Browser's built-in simulator are as follows:
(1) Open the Chrome developer tool, press F12 or (Fn+F12), find the gear button in the upper right corner, open the setting panel, select Overrides, and check Show 'Emulation' view in console drawer.
(2) Then close the setting panel, select the Elements panel (not Console), find the upper right corner to open the console panel, select the Emulation panel in the console panel, there are many options on the right, select one and click Emulate, and the Reset button can restore to the default state.
(3) You can select iPhone, iPad, Galaxy and other mobile devices for simulation. In addition, you can add the device information you want to test in "Add custom devices".
(4) After setting, you can open it to see the mobile web page, and then you can debug the mobile web page on the computer.
