Shulou(Shulou.com)06/02 Report--

Today, I'll talk to you about the debugging method of Weixin Mini Programs (Mini). Many people may not know much about it. In order to let you know more, Xiaobian summarizes the following contents for you. I hope you can gain something according to this article.

It is not enough to just take static code walk for controller index.js. We need to start Weixin Mini Programs (Mini) and explain them line by line through single-step debugging. We can have a deeper understanding of the controller implementation of Weixin Mini Programs through the calling context of the controller.

For this reason, we should first learn the debugging method of Weixin Mini Programs (Mini).

Open WeChat Developer Tools and click the "Debugger" button in the toolbar:

The area to the right of Developer Tools is now divided from top to bottom: the blue area above is still the code editing page, and the red area below is the debugging tool for Weixin Mini Programs (Mini).

Those of you who have done front-end development can see at a glance that this is actually Chrome's developer tool.

I also wrote an introduction to the use of Chrome developer tools on my Weixin Official Accounts "Wang Zixi." Interested friends can go and have a look:

The link is as follows: https://mp.weixin.qq.com/s?__ biz=MzI3MDE4MjM5Mg==&mid=2247484306&idx=1&sn=314d749da91a94064ef1e258657a0974&chksm=ead5b105dda23813addbca28689e3fcc22c0b47cb2d4f49557ec796edfa8fe88c43d2c70567a#rd

Open our controller index.js in the debugger, click line number "3", and line number 3 is automatically highlighted, indicating that a breakpoint has been successfully set on line 3.

Click the "compile" button, our Mini programs automatically start, and the breakpoints set in the controller are automatically triggered. In this way, we can learn the call context of the controller of Weixin Mini Programs by single step debugging.

The debugger of Weixin Mini Programs (Mini) can still be opened on mobile phones. Access Weixin Mini Programs on your phone and click the vConsole button in the lower right corner of the screen.

Then the whole phone screen is filled with the debugger of Weixin Mini Programs. This debugger can only display logs and perform some simple JavaScript operations compared to WeChat developer tools installed on computers, but it cannot debug JavaScript code like on computers.

We notice that the "command" in the above image... The input box allows you to type simple JavaScript commands like console.log ("Jerry").

Then you can see Jerry's output on the phone's debugger:

On the System tab, you can see some performance-related parameters and performance parameters of Weixin Mini Programs:

MicroMessenger version number: 6.6.6

Wechat lib: Library file version 2.0.9

navigation: 3ms Skip time 3 ms

domComplete(domLoaded): dom takes 19 ms to load

The WXML tab displays details of the currently rendered view:

Once you are familiar with the debugger of Weixin Mini Programs, you can start learning about the controller of Weixin Mini Programs in the next chapter.

After reading the above, do you have any further understanding of the debugging method of Weixin Mini Programs (Mini)? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.