Said to caught the problem, many primary front-end are not aware of the problem, although I also is a side dish, but for caught tools can be said to be mastered, because there are too many interface problem by testing me, if mastered caught not only can quickly pinpoint the problems, also can analyze the network request, As well as some front-end logic problems lead to interface trigger phenomena.
Therefore, a qualified front end must be able to capture packets, but also master the packet capture tool, such as through the packet capture tool some slow network, deal with some interaction when the slow network, more importantly, you can also use the packet capture tool to configure the page access jump, do some test pages when mixed development.
Catch what contract workers have
Familiar ones are Charles on Mac and Fiddler on Windows. There are too many tutorials about the installation and use of these two, so I will not repeat them in this article. Today I will introduce you a collection of package capture and H5 page debugging tool Spy-debugger.
Why started using Spy-Debugger
In the development process, our projects build a development branch according to the functional requirements, and when it comes to testing, merge the branch into the test environment, and then go online after passing the test. Basically, this is a unified process, but in the case of mobile terminal mixed development, we opened the mobile terminal mode in Chrome in the local development of H5 page, and basically there will be no big problems on mobile phones.
In this case, temporary changes will be made in the local branch, then merged into the test branch and compiled for testing. Often a lot of times, in the browser mobile mode to change things, on the real machine is not exactly the same, there will be a lot of adaptation and other problems, so if there is a debugging tool, can debug the real machine page, and debugging JS, but also can capture the package analysis that much better. All I had to do was configure a local agent for the device, and then I could modify the real code in the browser and see the effect of the real code. This greatly improved the efficiency of the modification, and then I encountered the spy-Debugger.
About the spy – the debugger
One-stop page debugging and packet capture tool. Remotely debug any mobile browser page, any mobile webView (e.g. Wechat, HybridApp, etc.). HTTP/HTTPS is supported without USB connection.
features
- Page debugging + packet capture
- Simple operation, no USB connection to the device
- Support HTTPS.
- The Spy-Debugger integrates with Weinre, Node-mitmProxy, and AnyProxy.
- HTTPS requests from native apps are ignored and only HTTPS requests from WebViews are blocked. There is no impact on native apps that use SSL pinning technology.
- Can be used in conjunction with other proxy tools (default: AnyProxy) (setting up external proxies)
The tutorials and official documentation are very detailed
Official document link