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

This article mainly explains "how to debug WeChat Mini Programs". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to debug WeChat Mini Programs.

Debugging tool

Debugging tools are divided into seven functional modules: Wxml, Console, Sources, Network, Appdata, Storage, Sensor, Trace

Wxml panel

Wxml panel is used to help developers develop the interface transformed by wxml. Here you can see the real page structure and the wxss attributes corresponding to the structure. At the same time, you can see the changes in real time in the simulator by modifying the corresponding wxss attributes (only real-time preview and cannot be saved to a file). By debugging the selector in the upper left corner of the module, you can also quickly locate the corresponding wxml code for the components on the page.

Sources panel

Sources panel is used to display the script file of the current project. Unlike browser development, WeChat Mini Programs framework compiles the script file, so the file that the developer sees in Sources panel is the processed script file, and the developer's code is wrapped in the define function, and for the Page code, there is an active call to require at the end.

Note: when the code runs to the breakpoint, the whole Mini Program stops, so the simulator will show a white screen or cannot operate.

AppData panel

AppData panel is used to display the specific data of Mini Program AppData when the current project is running, and reflect the project data in real time. You can edit the data here and feed it back to the interface in time.

Storage panel

Storage panel is used to display the data storage of the current project after using wx.setStorage or wx.setStorageSync.

You can delete, add or modify data directly on Storage panel (press delete key).

Network panel

Network Panel is used to observe and display requests from request and socket

Note: uploadFile and downloadFile do not support viewing in Network Panel

Console panel

Console panel has two main functions:

Developers can enter and debug code here

The error output of Mini Program will be displayed here

You can enter the following command in the console

Build: compiling Mini Program

Preview: preview

Upload: upload code

OpenVendor: open the directory where the base library is located

OpenToolsLog: open the tool log directory

CheckProxy (url): check the proxy usage of the specified url

Sensor panel

Sensor panel has two main functions:

Developers can choose to simulate geographical location here.

Developers can simulate the performance of mobile devices here to debug gravity-sensitive API

At this point, I believe you have a deeper understanding of "how to debug WeChat Mini Programs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.