preface

PC side web page debugging is relatively easy, here mainly describes several mobile side debugging methods, from simple to complex, from simulation debugging to remote debugging, roughly divided into several parts:

1, Chrome DevTools (Google Browser) simulated mobile debugging

2. Weinre (Web Inspector Remote) Remote debugging tool

3. Wechat’s “Web developer tools”, integrated with Chrome DevTools and Weinre, did a better job

4. Chrome DevTools remotely debugs Android and iOS pages

5. Eruda — Mobile web front-end debugging panel

Read the instructions

This article is not small white text, need a certain front-end foundation to understand; In addition, this article is not a debugging tutorial, many details are not clear screenshots or descriptions, as I said by default the reader understands some basic debugging methods;

Here I mainly on several debugging methods are summarized, convenient for themselves and others after reading the article to know more debugging methods; If you don’t understand what step you can leave a message on Baidu or in the comment section, thank you!

1. Chrome DevTools simulates mobile debugging

Use chrome developer tools directly, as shown in the image below, or use F12 or CTRL + Shift +I. In my opinion, no matter which browser, you can press F12 to open the developer tools.

This debugging mode can not only be used to simulate mobile phone debugging or the main PC side of the page debugging mode, mainly for mobile phone debugging.

After you open it, you will see a developer debugging interface similar to the following: Elements to view document Elements, Console to debug JS online and view output results, Sources to debug JS and view dependent resources, and Network to view all Network requests

 

Enter the page address to debug in the browser address bar, select the analog device, and then you can select the JS debugging to debug, there is a debug operation button in the right panel; In the Application panel you can see the data stored in the Application, Cookies, whatever

What if there is no model to emulate? Of course it has been added. Open the Settings panel of DevTools, and the right image will appear as follows:

                 

2. Weinre (Web Inspector Remote) Remote debugging tool

Weinre actually embedded a specific JS in the page to be debugged, so that the page can be detected by Weinre and the debug panel can be opened; Note that the Weinre debug panel cannot debug JS, nor does it support breakpoint debugging. It can only be used to debug page styles and is used in limited scenarios.

Need to choose according to oneself, the use of specific installation reference: blog.csdn.net/freshlover/… ; I don’t recommend this tool because I don’t use it much, so I put it here as an introduction and understanding; If you want to

Check out weinre’s own reference links for an in-depth look at the content.

3. Wechat’s “Web Developer Tool”

Wechat web developer tools, integrated with Google DevTools and Weinre, can be said to be a collection of the above two points, for those wechat public account inside the USE of H5 pages, this is the best choice;

This tool debugs generic web pages just like Google Chrome debugs, and you see the same debug panel; But if you want to debug wechat related functions such as: JS-SDK, permission list and so on, you must use this tool

Tool download address: mp.weixin.qq.com/wiki?t=reso…

 

In addition to using URL simulation debugging, wechat Web tools can also be used for remote debugging of Android phones. At present, the latest version does not support remote debugging of iOS. Open device monitoring panel:

The following screen is displayed. You can see that a Huawei device is connected. Note the following points for remote debugging:

1, mobile phone and computer use USB connection, mobile phone should be enabled USB debugging mode (different mobile phone is different)

2. Install the latest version of Chrome on your phone and open it

Then click Inspect to start debugging the current Google browser page on your phone. I won’t go into detail here, and there’s no need to go into detail

Take a look at the mobile debugging of wechat. IOS provides only ordinary proxy testing, while Android provides X5 Blink kernel debugging in addition to proxy testing. But not all phones support X5 Blink; So it’s common to use proxy debugging

After configuring the agent for the wifi network of the mobile phone, click to start debugging, and the monitoring interface appears. It is found that the weinRE is used to achieve this, but wechat has improved it, and has the following advantages compared with using WeinRE directly:

1. The convenience of not having to manually add weinre debugging scripts to the page

2. You can see the complete HTTP request log in Weinre’s Network request page card Network, and there is no ajax-only limitation

However, there are also disadvantages. As it is a tool developed by wechat, mobile debugging can only debug the pages opened in wechat App and not all the pages that can be opened in wechat can be debugged. It is suspected that there is filtering inside the tool

After you restart wechat, you can visit the page in wechat, which can be monitored, and then you can debug the page style. You can see the parameters and response results of each request in the Network page card

In short, if the debugging page is a page in wechat (generally a public account), the use of tools provided by wechat is very efficient; If it is a general browser page can also use wechat Chrome DevTools but it is best not to use Weinre

4. Chrome DevTools remotely debugs Android and iOS pages

Install the new Version of Google Chrome on your computer, then type Chrome ://inspect in the address bar to open the Device Monitor page, which can monitor iOS and Android devices. Install the latest version of the browser if the screen is not as shown in the image

Android:

Premise:

1, mobile phone and computer use USB connection, mobile phone should be enabled USB debugging mode (different mobile phone is different)

2. Install the latest version of Chrome on your phone and open it

You will find that a Huawei device has been added to the device monitoring page, and you can see the connection to the web page opened by Google Chrome on the current phone

A): You can enter the URL to open the phone here and then open, and the current page displayed on the phone will change

B):inspect indicates to start debugging the current page, debugging panel will open (important)

C): Focus TAB, indicating that the mobile phone displays the current connection

D) reload the page

E): Close indicates to close the page displayed on the current mobile phone

Next, click inspect start debugging page, note if Google browser cannot turn | wall, the debug page is can’t open, can change the hosts file baidu | wall

Then you can remotely debug mobile web pages just like you can debug PC web pages

IOS (Windows, skip this section if you have a macbook):

You can refer to: www.cnblogs.com/kelsen/p/64…

Premise:

1. Install iTunes software on the computer, otherwise the iPhone can not be identified normally. After installation, the data line is connected to the phone and the computer

2, Open the phone’s Settings — >Sarafi — > Advanced — >Web Inspector — > Enable (default is off, turn it on)

Download the ios-Webkit-debug-Prox agent (32-bit or 64-bit), which sets up a proxy between Chrome and Sarafi so that Chrome can check the pages opened by Sarafi on your phone

4, to perform in the CMD ios_webkit_debug_proxy -f chrome – devtools: / / devtools bundled/inspector. In HTML, command -f) is Google’s built-in monitor to debug (default use remote)

After startup, listen on port 9222 and see that an iOS device named Jiba is connected. The UDID of the device is in parentheses. Then see if Google Chrome has checked the port (there is port 9222 in the picture on the right). If not, add the port manually

     

At this time, open the Sarafi browser of the mobile phone and open the home page of Baidu. The browser can detect it. If you do not see it, refresh the monitoring interface, which will automatically appear in 3 seconds

 

If you click inspect, the debug panel also appears, as shown below, you can’t see the projection of the phone’s screen on the computer in the iOS debug panel, but this does not affect debugging; However, it is possible to run into problems where breakpoints do not take effect when debugging JS.

If you encounter this problem, click the button in the red box twice in a row to disable the breakpoint and then start the breakpoint. It’s a weird question.

At this point, you’re done debugging iOS and Android using Chrome. The way you use Chrome, you rely on Mobile Chrome on Android, Sarafi on iOS, depending on the software; However, it is understandable that remote debugging is not as easy as simulated debugging

5. Eruda — Mobile web front-end debugging panel

What is eruda? As the title suggests, this is for debugging the page on your phone, not your computer. The previous debugging methods are simulated debugging on the computer or remote debugging of the phone page, but Eruda is directly on the phone to debug the page.

What are the benefits? If you have to say the advantage is that you can directly open the debugging panel on the phone, which is similar to the DEVELOPER panel on the PC side. The main purpose is that you can directly debug on the phone when the effect of the debugging page on the PC side is inconsistent with that on the phone.

Schematic diagram (debugging effect picture on mobile phone) :

Details: www.oschina.net/p/eruda

I don’t use it much at the moment, but it’s a recommended debugging tool. Generally speaking, most developers debug their pages directly on the PC (either PC or mobile), so it is recommended to use Chrome DevTools or wechat Web developer tools to debug the pages during development.

Of course, some students said that I use 360 browser. In fact, no matter what browser you use, except for the kernel difference, the debugging mode is basically the same as Chrome DevTools. Here I want to say is the general debugging page directly use PC side to debug can, but found in the real machine running effect and expected inconsistent

Eruda can be used to achieve real machine debugging and then locate and solve problems.

 

The above tools do not exist independently of each other, and it is likely that multiple ways of joint debugging are needed to solve a problem. After all, we can not confine ourselves to one tool, so we should make full use of our strengths and avoid our weaknesses.

Finally, as I am a background engineer, I am interested in the front end and have limited experience. There must be many excellent debugging tools or debugging methods that I do not know. If you know, please contact me, so that we can promote each other.