Moving end debugging
Many times, when we develop, we will first use the mobile emulator in the PC side to debug, there is no problem, we will Test on the mobile phone side browser, this time, if there is no problem, it is very happy. But once there is a problem, we are difficult to solve because of the lack of visual interface. Not similar to the PC side, we can discourse the styles intuitively, or debugging breakpoints. Sometimes, we have to debug in the mobile side, but such debugging methods are extremely low, many times, they are experienced, or rely on exclusion. Even, we have to return to the implementation of the browser.So, what method is to make us debugging the mobile phone adaptation, is it as intuitive as a debugging PC? This article aims to provide you with the mobile debugging method, I hope to open a new door for you.
This article will give three real machine debugging methods, you can choose your favorite one ~
Mobile End Generator debugging method
- WEINRE debugging
- SPY-Debugger debugging
- Briefly explains the advantages and disadvantages of each way:
Second: Weinre debugging mode, installation and application is not complex, suitable for debugging of the platform, that is, any browser of any mobile phone can be debugged, but the phone and computer need to be under the same network segment.
Third type: Spy-debugger, the installation is slightly complicated, Spy-debugger integrates Weinre, but also adds the captain tool and is most convenient to use.
Let’s start to specifically describe how to use these three adjustmentsTest method:
1.chrome real machine debugging
The phone is connected to the CHROME browser, use USB to connect to the PC, open the USB debug mode of the phone.
The Chrome browser is opened in the PC side, entered in the address bar: chrome: // inspect. Check “Discovery USB Device”. Then browse the web on the mobile phone, you can see the following page, click Inspect, and debug. (In view of my working computer, it is not possible, because I can’t use this way, if I have the same situation like me, I can consider using two other debugging methods)
2. WebRE (Webinspector Remote) is a web inspector-based remote debugging tool that can be directly commissioned directly on PC with network. Remote page on your mobile device.
Local Server: You can use HTTP-Server, Tomcat, etc., you can also use compiler integration services
Weinre installationglobal Installation: NPM Install -g Weinre
Local installation: NPM Install Weinre
Start: Weinre – Httpport 8090 –BoundHost -all-
If it is partially installed, Need to add node_modules / .bin /
I believe that the front-end children’s shoes will use NPM package management tools. For this tool, I will not expand, and if I don’t have NPM, it is installed.
Weinre starts parameter description:
HTTPPORT: Set WNINre use the port number, the default is 8080
boundHost: [hostname | Ip | -all-]: The default is ‘localhost’
debug [true | false]: This option is -. verbose Similarly, the output will be more information. The default is false.
readTimeout [seconds]: Server to send a message timeout Target / Client, the default is 5s.
deathTimeout [seconds]: ReadTimeout default is 3 times, if the page is more than this time no response, it will disconnect.
- 8080 port usage in many cases, so I chose to specify port 8090. After
- started weinre, we enter localhost in the browser: 8090 show the following interface, it said that it has started successfully.
- Click to debug client user interface, enter the debug page.
In the current targets is empty.
Now, we need to make another point operations, we want to debug page, add a script.
then we start a local server, the server can be integrated IDE, or http-server, I use the http-server. after the start, we access the web page you want to debug the phone side. Then you will find the following targets increases the recording.When modifying the style, it will take effect on the mobile phone, and the console information can also be viewed. The only thing is that it is not possible to debug.
At this time, we can click ElementS is debugged.
Finally, after the end of the debug, don’t forget to delete the embedded script.
In addition to this method, it also introduces a segment of JS code on the mobile phone. When you need to debug a page, click Execute JS, but now the browser has no longer support this method for security. The default method is to search, not execution, so it is not available.
3. Spy-debugger real machine debugging
Finally, the Spy-Debugger method will be described. With this method, we no longer need to increase and delete scripts.
Spy-debugger integrates Weinre, intercepting all HTML automatically injects the JS code required by Weinre by the proxy. Simplified WeINRE needs to add JS code to each debug page. Spy-debugger principle is to intercept all HTML pages request to inject the JS code required for Weinre. Let page debugging more convenient.
Page debug + captain
Spy-debugger integrates Weinre, Node-MitmProxy, AnyProxy.
Automatically ignores the HTTPS request initiated by the native App, only intercepts the HTTPS request initiated by WebVIEW. No effect on native APPs that use SSL PINNING technology.
Can be used with other agent tools (by default using anyproxy)
- Spydebugger installation and use
- 1, installation: global installation NPM INSTALL -G SPY-DEBUgger
- 2, start: spy-debugger
- 3, set the HTTP agent of the phone
- The agent of the agent is the IP address of the PC, the agent’s port is Spy-Debugger Start port (default port is: 9888) The default port is 9888.
- If you want to specify the port: spy-debugger -p 8888
Android setting steps: set – WLAN – Long press Select Network – Modify Network – Advanced – Agent Settings – Manual
iOS set proxy steps: setting – Wireless LAN – Select Network – HTTP Proxy Manual
4, Mobile Installation Certificate (Node-MitmProxy CA Root Certificate)
Step: Generate Certificate:
Generates a CA root certificate, and the root certificate is generated in / users / xxx / node-mitmproxy / directory (Mac).
Step 2: Installation Certificate:
Put Node- The node-mitmproxy.ca.crt under the MitmProxy folder is transmitted to the phone, click the installation.
SPY-Debugger launched the interface, similarly, after the mobile phone is refreshed, there will be records in Targets
I have done the bean game The page shows the effect. When we select an element on your phone, we can see the corresponding information on the computer so that we can see what the style is not compatible, which is an exception, which is also available. The LOG information of JS is seen in the console, which is very helpful for mobile debugging.
Chrome Inspect application scenario limited weinre installation simple, need to increase and delete Script during use, if the debug page is large, it is not applicable. Spy-debugger installation is slightly complex, but the use process is very pleasant.
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.