Download tool and debugging for WeChat applets

This article mainly introduces the download tool for applets and detailed debugging materials, for more information, see the small program developer tools, small program development documents, and small program design guides released by the team later yesterday, integrates development debugging, code editing, and program release functions to help developers develop small programs in a simple and efficient manner. The following is an official document containing the mini-program developer tools and debugging guide.

: Developer Tool version 0.9.092300
Windows 64; windows 32; mac

To help developers develop small programs in a simple and efficient manner, we have introduced a brand new developer tool that integrates functions such as development debugging, code editing, and program release.

Devtools

Scan the QR code to log on

When starting the tool, the developer needs to scan the QR code that has been successfully bound in the background to log on. all subsequent operations will be based on this account.

Program debugging mainly has three functional areas: Simulator, debugging tool and mini-program operation zone

Simulator

The simulator simulates the real logical performance of the applet on the client, and shows the correct status for most APIs on the simulator.

Emulat

Debugging tools

Debugging tools are divided into six functional modules: Wxml, Console, Sources, Network, Appdata, Storage, and

3 Wxml Pannel

Wxml Pannel is used to help developers develop the interface after Wxml conversion. Here we can see the actual page structure and the wxss attribute corresponding to the structure. at the same time, we can modify the corresponding wxss attribute to see the modification in real time in the simulator. You can quickly find the wxml code corresponding to the component on the page by using the selector in the upper left corner of the debugging module.

Wxml
Sources Pannel

Sources Pannel is used to display the script file of the current project. different from browser development, the applet framework will compile the script file, therefore, in Sources Pannel, the developer sees the file as 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 request at the end.

Sources
Network Pannel

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

Network
Appdata Pannel

Appdata Pannel is used to display the specific appdata data at the current time of the current project, and feedback the project data in real time. you can edit the data here and report it to the interface in a timely manner.

Appdata
Storage Pannel

Storage Pannel is used to display the data Storage status of the current project after wx. setStorage or wx. setStorageSync is used.

Storage
Console Pannel

The Console Pannel has two functions:

Developers can enter and debug code here

Console

The error output of the applet is displayed here

4. applet operation zone

The applet operation area helps developers simulate some client environment operations. For example, when a user returns to the chat window from a small program, an api set as a background program is triggered.

5. when a applet uses multiple windows, you can switch pages in the top operation area. Note that this operation is only available for developers, not in real clients.

In the editing area, you can write code for the current project and add, delete, and rename files.

The tool currently provides four types of file editing: wxml wxss js json
Auto-completion

Like most editors, we provide comprehensive auto-completion

Common shortcut keys

Format adjustment

Ctrl + S: Save the file
Ctrl + [, Ctrl +]: code line indent
Ctrl + Shift + [, Ctrl + Shift +]: collapse and open the code block
Ctrl + C Ctrl + V: copy and paste. If no text is selected, copy and paste a row.
Shift + Alt + F: code formatting
Alt + Up, Alt + Down: move Up and Down a row
Shift + Alt + Up, Shift + Alt + Down: copy a row Up/Down
Ctrl + Shift + Enter: insert a row above the current row

Cursor-related

Ctrl + End: move to the End of the file
Ctrl + Home: move to the beginning of the file
Ctrl + I: select the current row
Shift + End: Select from the cursor to the End of the row
Shift + Home: Select from the beginning of the line to the cursor
Ctrl + Shift + L: Select all matches
Ctrl + D: select match
Ctrl + U: Move the cursor back

The project directory displays the details of the current project, including icons, appid, and directory information.

Click Preview. the tool automatically compiles and constructs the code and generates the code package and uploads it to the server. a QR code is displayed, developers can use the new version to scan the QR code to see the real performance of the corresponding project on their mobile phones.

Note that in the internal test phase, the code Upload function is only available as the administrator number.

The above are the materials for debugging the mini-program download tool. we will add relevant materials later. thank you for your support for this site!

For more articles on downloading tools and debugging for small programs, please follow the PHP Chinese network!