Program debugging includes three major functional areas: simulator, debugging tools, and Mini Program operation area

# Simulator

The simulator simulates the actual logical performance of Weixin Mini Programs in the client. Most of the APIs perform correctly on the simulator.

# Custom Compilation

Click the compile button of the toolbar or press the shortcut key Ctrl(⌘) + B to compile the current code and refresh the simulator automatically.

In addition, developers can add or select a custom compilation conditions to preview the compilation and code. This helps developers debug issues by entering a specific page from different scene values (see the figure).

Note: Compilation conditions are related to projects, and each project can save its own compilation conditions.

# Compilation Errors

Compilation errors may occur during preview or uploading.

Files not to be uploaded: Some files under the project folder may not be required to run the Mini Program, e.g. a readme file or .gitignore, etc. These files will not be packed during preview and uploading to reduce the package size.

Oversized files: When the ES6 to ES5 conversion or the code compression option is enabled, the DevTools will skip oversized JS files in order to accelerate compilation.

# Custom Preprocessing

We offer the following default preprocessing options on the "Project Settings" tab to solve most problems in code file preprocessing:

1. ES6 to ES5 conversion (for compilation, preview, and uploading). Use "babel-core": "^6.26.0"
2. Style auto-complete when uploading code. Use "postcss": "^6.0.1"
3. Auto-compression when uploading code. Use "uglify-js": "3.0.27"

Advanced developers can write their own build automation script to preprocess the code files, so we provide the Enable Custom Processing Commands option. The developer can specify the commands to be preprocessed before compilation/before preview/before uploading. The Weixin DevTools runs the specified commands using shell and output the execution log in the console.

Preprocessing command execution order

1. Custom preprocessing command
2. Default preprocessing command
3. Compilation/preview/uploading

Note:

1. Before compilation, preprocessing commands can only be triggered by clicking the Compilation button manually or entering the compilation shortcut. File modification will not trigger this command.
2. The Weixin DevTools for Mac cannot reuse the Path environment variables in bash. You may have to manually set the Path environment variables of the system to execute commands normally.

# Foreground/Background switch

The foreground/background switch function in the toolbar can help developers simulate some operations in the end-user environment. For example, when callback is triggered to switch the Mini Program to the background when the user goes from the Mini Program back to the chat window.

# Debugging Tools

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

# Wxml panel

The wxml panel is used to help developers develop interfaces after wxml conversion. Here we can see the real page structure and wxss properties corresponding to the structure. The changes can also be viewed in real time in the simulator by changing the corresponding wxss properties (it is only a real-time preview and cannot be saved to the file). You can also quickly find the wxml code corresponding to components on the page using the selector in the top left corner of the debug module.

# Sources panel

The Sources panel is used to display the script file for the current project. Unlike browser development, the framework of a Weixin Mini Program compiles the script file. Therefore, the file that developers see on the Sources panel is a script file that gets processed. Developers' codes are all packaged in the define function. Page code also has an active 'require' call at the end.

Note: When code execution reaches a breakpoint, the Mini Program stops and a white screen appears or the simulator fails to execute.

# AppData panel

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

# Storage panel

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

You can delete (press the delete key), add, and modify data directly in the Storage panel.

# Network panel

The Network panel is used to observe and display the request information of request and socket.

Note: Viewing uploadFile and downloadFile is not currently supported on the Network panel.

# Console panel

The Console panel has two major features:

• Developers can enter and debug code here.

  

• The error output of the Mini Program will be shown here.

  

• You can enter the following commands in the console.

build: Compile the Mini Program

preview: Preview

upload: Upload code

openVendor: Open the directory where the base library is located

openToolsLog: Open the DevTools log directory

checkProxy(url): Check the proxy usage of the specified URL

# Sensor panel

The Sensor panel has two major features:

• Developers can select a simulated geographical location here.

  

• Developers can simulate mobile device performance here to debug the gravity sensor API.

  

# Custom Data Reporting

In Weixin DevTools, you can edit and debug the data reporting function of Custom Analysis and open the custom analysis in a pop-up window by clicking Tools > Custom Analysis:

On the page, you can create, view, or modify events. When you finish editing events on the page and click the Save and test button at the bottom to save the current configuration, the DevTools will receive the new configuration in the debugger and display the configuration information. This information includes the event ID and name, and the trigger conditions and reporting data of each action:

Then, you can perform operations in the simulator and trigger events. You can also refresh the Mini Program to obtain the test configuration, unless the window is closed, in which case the simulator can no longer receive the configuration. After an event is triggered and reported, the reporting information will be displayed on the tool, including the event ID, the trigger page, method, and action and the reporting field values and data:

At the same time, you can click Sync results to synchronize the reporting data:

When the window is closed, all configurations will become invalid and the simulator will no longer receive configurations nor trigger reports. (Data reporting carried out with the wx.reportAnalytics API in the Mini Program will still be output in the DevTools.) You can publish the event configuration at the Mini Program back-end once the test is successfully completed, and the defined event data can be officially collected.

# Automatic Preview

You can view a quick preview of the Mini Program being programed through the automatic preview function. In this case, you do not have to scan a QR code or use the Mini Program Assistant. Press the shortcut key while running Weixin in the foreground to open or refresh the Mini Program.

Automatic previews are supported in Weixin app version 6.6.7 or above.

To use the automatic preview function, you can click the Automatic Preview tab to switch to automatic preview mode while opening the QR code preview. Then press the preview shortcut key or click the Compile and Preview button in the floating window to trigger automatic preview. At the same time, the DevTools will upload code, and the Weixin app running in the foreground will automatically refresh the Mini Program under development.

When the automatic preview function works, a green tick will appear on the preview icon of the toolbar, while a red exclamation mark indicates a preview error. You can click it to view details.

Note that the auto preview feature is only available for the same Weixin account that logged in to the Weixin DevTools. To switch back to the normal preview mode, simply click the Scan QR Code to Preview tab.

Users can set a custom preview shortcut in the shortcut settings.

# Source Map

This function is only supported by iOS 6.7.2 and above.

When Mini Programs/Mini Games are packaged, all the JS code will be packaged into one file. We provide Source Map support for Mini Programs/Mini Games to help developers locate errors when they debug on a mobile phone.

Enabling ES6 to ES5 conversion and code compression in the Weixin DevTools will generate a Source Map .map file. In the developer version of the Mini Program, the base library will use the .map file in the code package to remap the error message stack displayed in vConsole (developer code files only).

If the source file is processed with external compilation script, you simply need to put the generated Source Map file in the same directory as the source file.

For example:

pages/index.js

pages/index.js.map

app.js

app.js.map

The Weixin DevTools will read, parse and upload the Source Map file.

You can use the uploaded Source Map file to analyze errors later at the operation center of the Mini Program back-end.

1. The Source Map file is not calculated in the code package size.
2. The line sourcemap is not calculated in the code package size.
3. The developer version of a code package is larger than the test version and the official version because it contains the .map file.