Mobile Real-Machine debugging

Difficult to debug on the mobile side

Most of the time, we are in the mobile development, are first in the PC-side use of mobile phone simulator for debugging, no problem, we will be in the mobile browser to test, this time, if there is no problem, happy. But once there is a problem, it's hard to solve it because of the lack of a visual interface. Unlike on the PC side, we can intuitively change the style or debug the breakpoint. Sometimes, on the mobile side we have to use the alert to debug, but such a debugging method is extremely inefficient, many times, are based on experience, or by the elimination method. Even, we have to be attributed to the implementation of the browser.

Resolution strategy

Mainly introduces three kinds of debugging methods, are feasible, as to choose which way, look at their own likes.

1. Chrome Real-Machine debugging
2. Weinre Commissioning
3. Spy-debugger Commissioning
   Let's start by talking about the pros and cons of each approach.
   The first, chrome real-Time debugging, there is a big limitation is that only debugging the mobile phone Chrome browser, for UC,QQ these browsers are not applicable, so when debugging compatibility issues, the help is not big, but the biggest advantage is: simple and fast.
   The second, weinre debug mode, installation and application is not complex, for the full platform debugging, that any mobile phone browser can be debugged, but the need for mobile phones and computers in the same network segment.
   The third, Spy-debugger, is slightly more complicated to install, Spy-debugger integrates weinre, but also adds a grab kit. The most convenient to use.

Here are three ways to do this:

Chrome Real-Machine debugging

Download the Chrome browser on your phone, connect to your PC using USB, and turn on your phone's USB debug mode.
Then open the Chrome browser on the PC side and type in the Address bar: Chrome://inspect. Tick "Discovery USB Device". Then on the mobile phone to browse the page, you can see the following page, click Inspect, for debugging. (Since my work computer is domain-based, because it can not be used in this way, if you have the same situation as I have children's shoes, you may consider the use of two other debugging methods)

weinre

The weinre (Webinspector remote) is a web-based Inspector (Webkit), remotely debugging tool that enables you to debug remote pages running on a mobile device directly on your PC with the help of a network.

Local server, you can use Http-server, tomcat, etc., or you can use a compiler-integrated service

weinre Installation

Global installation: NPM install–g weinre
Partial installation: NPM Install Weinre
Start: Weinre–httpport 8090–boundhost-all-
If it is a partial installation, you need to add node_modules/.bin/to the front.
I believe that the front-end children's shoes will use NPM package management tool, for this tool, I will not expand, if not installed NPM, self-installation.

weinew Start parameter description:
–httpport: Set the port number used by the wninre, default is 8080
–boundhost: [hostname | Ip | -all-]: Default is ' localhost '.
–debug [True | false]: This option is similar to –verbose and will output more information. The default is False.
–readtimeout [seconds]: server sends information to target/client time-out, default is 5s.
–deathtimeout [seconds]: The default is 3 times times the readtimeout, if the page does not have any response at this time, then the connection will be disconnected.

8080 ports are used more, so I chose to specify 8090 ports.
After launching the weinre, we enter localhost:8090 in the browser. The following interface is displayed, indicating that it has been started successfully.

Click Debug Client user interface to enter the Debug page.

The contents of the current targets are empty.

Now, we need to do something else and add a script to the page we want to debug.

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

• 1

• 1

Remember to replace localhost with your IP address.

Then, we start a server locally, either the IDE inherits the server, or Http-server, I'm using Http-server. After booting, we access the Web page to debug on the phone. Then you will find that the records are added below the targets.

This is, click Elements to Debug.

When you modify a style, it takes effect immediately on the phone, and you can also view console information, except that you cannot debug breakpoints.
Also, don't forget to delete the embedded script after the debugging is complete.

In addition to this method, also introduced in the mobile phone to save a section of JS code, when the need to debug a page, click to execute JS, but now the browser for security purposes, the method is no longer supported. The default method is to search, not execute, so it is not advisable.

Spy-debugger

Finally, let's introduce the Spy-debugger method. With this method, we no longer need to add and remove scripts ourselves.

Spy-debugger internal integration of the weinre, through the proxy block all the HTML automatic injection weinre required JS code. Simplifies the weinre need to add JS code to each debug page. The Spy-debugger principle is to intercept all HTML page requests to inject weinre the JS code required. Make page debugging more convenient.

Characteristics:
1. Page Debug + Grab Bag
2. Simple operation
3, support HTTPS.
4, Spy-debugger internal integration of weinre, Node-mitmproxy, Anyproxy.
5. Automatically ignores HTTPS requests originating from the native app and only intercepts HTTPS requests initiated by WebView. There is no impact on native apps that use SSL pinning technology.
6, can be used in conjunction with other agent tools (default use Anyproxy)

Spydebugger Installation and use
1. Install: Global Install NPM install–g Spy-debugger
Locally installed NPM Install Spy-debugger

2. Start: Spy-debugger, if the local installation, need to add node_modules/.bin

3. Set the HTTP proxy for your phone
The address of the agent is the IP address of the PC, the port of the agent is the boot port of Spy-debugger (the default port is: 9888)
The default port is 9888.
If you want to specify a port: Spy-debugger–p 8888
Android Setup steps: Settings-WLAN-long Press to select network-Modify network-Advanced-proxy Settings-Manual
iOS Setup Agent steps: Settings-Wireless LAN-Check network-HTTP proxy manual
4. Mobile phone Installation certificate (node-mitmproxy CA root certificate)
Sweep installation:

Spy-debugger start the interface, again, after the phone to refresh the page, there will be a record in the targets

Summarize:
1.chrome Inspect Application Scenario Limited
2.weinre installation is simple, the use of the process needs to add and delete script, if the Debug page a lot of cases, not applicable.
3.spy-debugger installation is slightly more complex, but the use of the process is very enjoyable.

Mobile Real-Machine debugging