Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

The method of debugging WeChat Mini Programs tool Program

2025-01-30 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

Today, I would like to share with you the relevant knowledge of WeChat Mini Programs tool program debugging methods. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

There are three main functional areas for program debugging: simulator, debugging tools and Mini Program operation area.

Simulator

The simulator simulates the real logic performance of WeChat Mini Programs on the client side, and for most of the API, it can show the correct state on the simulator.

Compiled code

Click the compile button in the lower left corner of the tool or use the shortcut key Ctrl (Command) + B to compile the current code and automatically refresh the simulator.

At the same time, in order to help developers debug specific pages or enter scenario values, for example, developers can choose custom compilation mode.

Debugging tool

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

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 corresponding wxss attribute of the structure. At the same time, you can see the modification in real time in the simulator by modifying the corresponding wxss attribute. By debugging the selector in the upper left corner of the module, you can also quickly find 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.

Network panel

Netwrok Pannle is used to observe and display requests from request and socket

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

Appdata panel

Appdata panel is used to display the specific appdata data of the current project and feedback the project data in real time. The data can be edited here and fed 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.

Console Pannel

Console Pannel has two main functions:

Developers can enter and debug code here

The error output of Mini Program will be displayed here

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

Mini Program operating area

The Mini Program operating area helps developers simulate some client environment operations. For example, when a user returns to the chat window from a mini program, it triggers an api in which Mini Program is set as the background.

When Mini Program uses multiple windows, you can switch pages in the top operation area. It should be noted that this operation exists only for the convenience of developers, not in real Wechat applications.

Custom data reporting

Developers can edit and debug the data reporting function of custom analysis on the tool. Click "tools-Custom Analysis" in the menu bar to open the custom analysis window:

You can create, view or modify events on the page. After editing the modified events, click the Save and Test button at the bottom to save the current configuration. At the same time, the tool will prompt you to receive the latest configuration on the debugger and display the configuration information, including the ID and name of the event, as well as the trigger conditions and reported data for each action:

Events can then be manipulated and triggered in the simulator. Refreshing Mini Program in the simulator will also get the test configuration unless the window is closed. The emulator will no longer receive the configuration after the window is closed. When an event is triggered to report, the reporting information is displayed on the tool, including event ID, trigger page, trigger method, action when triggered, and reported field values and data:

At the same time, you can click "synchronization results" in the window to display the reported data synchronously:

After closing the window, all configurations will become invalid, the simulator will no longer receive the configuration and will no longer trigger escalation (data escalation using wx.reportAnalytics API in Mini Program will still be output in the tool). After the test is successful, you can publish the event configuration at the Mini Program backend to collect the defined event data.

These are all the contents of this article entitled "WeChat Mini Programs tool Program debugging methods". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report