Program debugging has 3 major function areas: Simulator, debugging tool, and Mini Program operation area
The simulator simulates the actual logical performance of WeChat Mini Programs in the client. Most of the APIs can perform correctly on the simulator.
The current code can be compiled and the simulator auto-refreshed by tapping the Compile button on the toolbar or using the shortcut key Ctrl(⌘) + B.
To help developers debug entering specific pages with different scenario values, the developer can add or select the existing custom compilation conditions to compile and preview the code (as illustrated).
Note: Compilation conditions are project-specific, each project can keep its own compilation conditions
Compilation Exception Message
During the preview or upload process, a compilation error message may occur.
Ignore uploaded files: Under the project folder, certain files may not be needed for Mini Program to run, such as readme,
.gitignore file, etc. In order to optimize the size, these files will not be packaged during the preview and upload process.
Oversized files: If the options of ES6-to-ES5 conversion or code compression are selected, the tools will skip processing some large JS files in order to optimize compilation speed.
In the Project Settings tab, we provide the following default preprocessing works, which can solve most of the code file preprocessing issues.
- ES6-to-ES5 conversion (can be applied to compile, preview and upload), using "babel-core": "^6.26.0"
- Style completion when uploading code, using "postcss": "^6.0.1"
- Auto compress when uploading code, using "uglify-js": "3.0.27"
Advanced developers can write their own automated build script to preprocess the code files. So, we provide the
Custom process commands option.
Developers can specify the commands that need to be preprocessed by
before compilation/before preview/before upload.
The developer tools use the shell method to run specified commands, and export the execution logs of the commands in the control panel.
Execution order of the preprocess commands
- Custom preprocess commands
- Default preprocess commands
- To preprocess commands before compilation, you need to manually click the "Compile" button, or use the shortcut key to trigger compilation. Modifying a file cannot trigger this command.
- The Mac version of the developer tools cannot reuse the Path environment variables in bash. You may have to manually set the Path environment variables of the system to execute the command normally.
Switching between front-end and backend in the toolbar helps developers simulate some of the client's environment operations. For example, when the user returns to the chat window from a Mini Program, a callback that the Mini Program is set as a backend will be triggered.
Debugging tools are divided into 7 functional modules, including Wxml, Console, Sources, Network, Appdata, Storage, Sensor and Trace.
The Wxml panel is used to help developers to develop the interface applied with wxml transformation. Here, you can see the actual page structure and the wxss properties corresponding to the structure. Meanwhile, you can see the modification in real time in the emulator by modifying the corresponding wxss properties (it is only a real-time preview and cannot be saved to the file). You can also quickly locate the wxml code corresponding to the component in the page by debugging the selectors in the upper left of the module.
Sources panel is used to display the current script file of the project. Unlike browser development, the Mini Program framework will compile the script files, so the file that developers see in the Sources panel is a processed script file, and the developer's code will be wrapped in the define function, and for the Page code, there will be an active call to require at the end.
Note: when the code runs to the breakpoint, the entire Mini Program stops, so the emulator will either be blank or unable to be operated.
AppData panel is used to display the specific AppData data of the Mini Program during current project runtime. It can reflect the project data in real time. You can edit data here and feed it back to the interface in time.
Storage panel is used to display the data storage of the current project after using
You can delete (press Delete key), add, and modify data directly from the Storage panel.
Network Panel is used to observe and display the requesting of request and socket.
Note: uploadFile and downloadFile are temporarily not supported to be viewed in the Network Panel.
"Console Panel" has 2 major functions:
The developer can enter and debug code here
The error output of the Mini Program will be displayed here
The following commands can be entered in the console
build: compile the Mini Program
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 for the specified url
Sensor panel has two major functions:
Developers can select a simulated geographical location here
Developers can simulate mobile device performance here to debug the gravity-sensing API
Customized Data Reporting
Data reporting for custom analysis can be edited and debugged on the developer tool. Click Tools > Custom Analysis in the menu bar to enable custom analysis in a popup window:
You can create, view, or modify events on the page. After finishing editing in the page for modifying events, click the Save and Test button at the bottom to save the current configuration. Meanwhile, the tools will have a prompt on the debugger for receiving the latest configuration and display configuration information including the ID and name of the event, as well as the trigger condition and reported data for each action:
The event can then be operated and triggered in the simulator. Refreshing the Mini Program in the simulator will also obtain the test configuration unless the window is closed. The simulator will no longer receive the configuration after the window is closed. When the event is triggered to be reported, the tools will display the report information, including the event ID, trigger page, trigger method, trigger action, and reported field values and data:
Meanwhile, you can click Sync Result in the window to display the reported data synchronously:
After the window is closed, all configurations will be invalid. The simulator will no longer receive the configuration or trigger reporting (data reported by the
wx.reportAnalytics API in the Mini Program will still be exported in the tools).
After the test is successful, the event configuration can be released in the backend of the Mini Program, and the defined event data can be officially collected.
Auto Preview allows you to preview quickly when writing a Mini Program, eliminating the need to scan a QR code or use the Mini Program development assistant every time you want to view the effect of the Mini Program. Simply press the shortcut key to keep WeChat running in the foreground and the Mini Program will be automatically called up or refreshed.
To use the Auto Preview feature, a version of WeChat client version 6.6.7 and above is required.
To get started, switch to the Auto Preview mode by clicking the Auto Preview tab when you open a QR code preview. After that, simply click the Preview shortcut key or the Compile and Preview button on the floating window to trigger Auto Preview. At this point, the tools will upload the code, and the WeChat client that is kept running in the front-end will automatically refresh the currently developing Mini Program.
When Auto Preview is successful, the preview icon on the toolbar will appear as a green tick. If the preview is in error, it will appear as a red exclamation point and you can click to view the details.
Note that the Auto Preview feature is only available for the same WeChat account that has logged in to the developer tools. To switch back to the normal preview mode, simply click the Scan QR Code to Preview tab.
Users can customize preview shortcuts in the shortcut settings.