WeChat Open Platform

Mini Programs Documentation

Debugging Tools

Program debugging has three main functional areas: the simulator, the debugging tools, and the Mini Program operation area.

Simulator

The simulator simulates the actual logical presentation of a WeChat Mini Program in the client. The vast majority of APIs can be presented in their correct state in the simulator.

emulat

Code compilation

Click on the Compile button in the bottom left corner or use the shortcut Ctrl(Command) + B to compile the current code and automatically refresh the simulator.

Developers can also select custom compilation mode in order to help debug specific pages or entered scene values, such as images.

wxml

Debugging tools

The debugging tools are divided into seven main functional modules: WXML, Console, Sources, Network, Appdata, Storage, and Sensor.

WXML panel

The WXML Panel is used to help developers develop interfaces after wxml conversion. The real page structure and the wxss attributes corresponding to the structure can be seen here. The modification status can also be viewed in real time in the simulator by modifying the corresponding wxss attributes. You can also quickly find the wxml code corresponding to components in the page using the selector in the top left corner of the debug module.

wxml

Sources panel

The Sources Panel is used to display the script file for the current project. Unlike browser development, the framework of a WeChat Mini Program will perform the task of compiling the script file. Therefore, the file that developers see on the Sources Panel is a script file that has been processed. Developers' code will all be packaged in the define function. Page code will also have an active require call at the end.

sources

Network panel

The Network Panel is used to observe and display the status of request and socket requests.

network

Note: Viewing uploadFile and downloadFile is temporarily not supported on the Network Panel.

Appdata panel

The Appdata Panel Is used to display the specific appdata data for the current project at the current moment and provide real time feedback on the project's data status. Data can be edited here and fed back promptly to an interface.

appdata

Storage panel

The Storage Panel is used to display the data storage status after using wx.setStorage or wx.setStorageSync for the current project.

storage

Console panel

The Console Panel has two main functions:

  • Developers can enter and debug code here.

console

  • The Mini Program's error output will be displayed here.

4

Sensor panel

The Sensor Panel has two main functions:

  • Developers can select the geographical location for simulation here.

location

  • Developers can simulate mobile device presentation here, used to debug the gravity sensor API.

4

Mini Program operation area

The Mini Program operation area helps developers to simulate some client environment actions. For example, when a user returns to a chat window from a Mini Program, this will trigger the setting of the Mini Program as a background api.

5

When a Mini Program uses multiple windows, page switching can be performed in the top operation area. It needs to be noted that this operation only exists to make things easier for developers, a real WeChat client will not have it.

7