H5 development local debugging tutorial
As a front-end developer, everyone has more or less contact with or needs to develop H5 pages in their daily work. During the development process, how to have a silky experience like a PC-side page?
Different situations require debugging at different ends to be more convenient and effective:
1. When drawing the UI, it is more suitable for debugging on the PC side, changing the code or directly debugging in the browser, all of which will produce real-time effects; more in line with the development experience and efficiency;
2. When debugging some functions and interacting with the native end, the H5 page on the PC end cannot be debugged; then it needs to be operated on the mobile end to interact with the native end;
In the first case, the content of this film will not be explained, and we will focus on the second case:
Take the H5 page access to the DingTalk terminal (Mac system) as an example to illustrate (access to other terminals is similar):
Proxy software needs to be installed on the PC side. The frequently used software includes Charles, Finder, Whistle, etc. For different systems, you can download corresponding proxy tools that are more useful;
I am using Whistle here
Chinese link: https://wproxy.org/whistle/
-
step one:
The tutorial of the installation article is carried out step by step
After installation, you can start it locally with the command
w2 start
According to the printed information, visit the address:
http://127.0.0.1:8899/#rule