At 9102, can you still move the real machine for debugging?

  html5, javascript, Mobile web

It is difficult to debug the mobile terminal.

Most of the time, when we are developing the mobile terminal, we use the mobile phone simulator to debug it on the PC terminal first. We will test it on the browser of the mobile terminal only after there is no problem. At this time, if there is no problem, everyone is happy. However, once there is a problem, it is very difficult for us to solve it because there is no visual interface. Unlike on the PC side, we can change the style intuitively or debug breakpoints. Sometimes, we have to use alert to debug on the mobile side, but this debugging method is extremely inefficient, most of the time, it depends on experience or exclusion method. Even, we have to attribute it to the implementation of the browser.

So, what method can we use to debug the adaptation of the mobile terminal as intuitively as debugging the PC terminal? The purpose of this article is to provide you with debugging methods for mobile terminals, hoping to open a new door for you.

This article will give three real machine debugging methods, you can choose your favorite one ~

Debugging method of mobile terminal real machine

  1. Chrome real machine debugging
  2. Weinre debugging
  3. Spy-debugger debugging

Briefly explain the advantages and disadvantages of each method:

The first one: chrome real machine debugging has a big limitation: only the chrome browser on the mobile phone can be debugged, which is not applicable to UC and QQ browsers. Therefore, it is not helpful in debugging compatibility problems, but the biggest advantage is: simplicity and quickness.

The second is weinre debugging method, which is not complicated to install and apply, and is suitable for platform-wide debugging, i.e. any browser of any mobile phone can be debugged, but the mobile phone and the computer need to be on the same network segment.

The third one is spy-debugger, which is a little more complicated to install. spy-debugger integrates weinre, but it also adds a package grabbing tool, which is the most convenient to use.

Let’s start with a detailed introduction to how to use these three debugging methods:

1.chrome Real Machine Debugging

The mobile phone downloads chrome browser, connects to PC with USB, and turns on USB debugging mode of the mobile phone.
Then open the chrome browser on the PC side and enter: chrome://inspect. Check “discovery usb device”. Then browse the web page on the mobile phone, you can see the following page, click inspect and debug. (Since my working computer is domain-added, because this method cannot be used, if there are children’s shoes in the same situation as mine, two other debugging methods can be considered.)

clipboard.png

2. commissioning of 2.weinre real machine

Weinre(WebInspector Remote) is a remote debugging tool based on Web Inspector(Webkit). With the help of network, remote pages running on mobile devices can be directly debugged on PC.

clipboard.png

Local server: http-server, tomcat, etc. can be used, and compiler integrated services can also be used.

Weinre installation

Global installation: npmimstall–gweinre

Local installation: npInstallWeinre

Starting: weinre-http port8090-boundhost-all-

If it is a partial installation, node_modules/.bin/

I believe that the front-end children’s shoes will use npm package management tools. I will not expand this tool. If npm is not installed, I will install it myself.

Weinre startup parameter description:

  • HttpPort: set the port number used by winnere, which defaults to 8080.
  • BoundHost: [hostname | Ip | -all-]: default is’ localhost’.
  • Debug [true | false]: This option is similar to–-verbose and will output more information. False by default.
  • Read timeout [seconds]: the timeout period for the server to send information to Target/Client, which defaults to 5s.
  • DeathTimeout [seconds]: the default is 3x readTimeout. if the page does not respond after this time, the connection will be disconnected.

8080 port is widely used, so I chose to specify 8090 port.

After starting weinre, we enter localhost:8090 in the browser. The following interface is displayed to indicate that the start has been successful.

clipboard.png

Click debug client user interface to enter the debugging page.

clipboard.png

The content in the current targets is empty.

Now, we need to do another thing, add a script to the page we want to debug.

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>

Remember to replace localhost with your IP address.

Then, we start a server locally, which can be IDE integrated server or http-server. I use http-server. After starting, we visit the webpage to be debugged on the mobile phone. Then you will find that there are more records under targets.

At this time, we can click Elements to debug.

clipboard.png

When modifying the style, it will take effect immediately on the mobile phone side and you can also view the console information. The only point is that breakpoint debugging cannot be performed.

Finally, after debugging, don’t forget to delete the embedded script.

In addition to this method, it is also introduced to save a Js code on the mobile phone and click to execute JS when debugging a certain page. However, the browser no longer supports this method for the sake of safety. The default method is search, not execution, so it is not desirable.

3.spy-debugger Real Machine Debugging

Finally, introduce spy-debugger method. With this method, we no longer need to add and delete scripts ourselves.

Spy-debugger integrates weinre internally and intercepts all js codes required by html to automatically inject weinre through proxy. Simplifies weinre’s need to add js code to each debugged page. Spy-debugger principle is to intercept all html page requests to inject js code required by weinre. Make debugging the page more convenient.

Features:

  1. Page Debugging+Catch Package
  2. Simple operation
  3. HTTPS is supported.
  4. Spy-debugger internally integrates weinre, node-mitmproxy and AnyProxy.
  5. Https requests initiated by native App are automatically ignored and only https requests initiated by webview are blocked. There is no impact on native App using sslpenning technology.
  6. It can be used together with other proxy tools (AnyProxy is used by default)

Spydebugger installation and use

  1. Installation: global installation npmsTALL–gspy-debugger
  2. Start: spy-debugger
  3. Set up HTTP proxy for mobile phone

    The address of the agent is the IP address of the PC, and the port of the agent is the startup port of spy-debugger (default port: 9888). The default port is 9888.

    If you want to specify a port: spy-debugger -p 8888

    Android Setup Steps: Setup-WLAN-Press Selected Network Long-Modify Network-Advanced-Proxy Settings-Manual

    IOS Setup Proxy Steps: Setup-WLAN-Select Network-HTTP Proxy Manual

  4. Mobile phone installation certificate (node-mitmproxicaroot certificate)

    Step 1: Generate Certificate:

    Generate a CA root certificate, which is generated under the /Users/XXX/node-mitmproxy/ directory (Mac).

    spy-debugger initCA

    Step 2: Install Certificate:

    Send node-mitmproxy.ca.crt under the node-mitmproxy folder to the mobile phone and click install.

    Spy-debugger starts the interface. Similarly, after the mobile phone refreshes the page, there will be records in targets.

clipboard.png

Let’s take the page of the Beijing bean game I used to do to show the effect. when we select an element on the mobile phone, we can see the corresponding information on the computer, so we can see what style incompatibility may have caused the UI abnormality. similarly, we can also see JS log information in the console, which is very helpful for mobile debugging.

clipboard.png
]

Summary:

  1. Chrome inspect has limited application scenarios.
  2. Weinre is easy to install, script needs to be added and deleted during use, which is not applicable if there are many debugging pages.
  3. Spy-debugger installation is slightly complicated, but the use process is very pleasant.

Thank you for taking the precious time to read this article. If this article gives you some help or inspiration, then don’t be stingy with your praise and Star Ha. Your affirmation is my greatest motivation to move forward.https://github.com/YvetteLau/ …

Recommend to pay attention to my public number:

clipboard.png