Late yesterday the WeChat team released the WeChat Small Program Developer Tool, WeChat Small Program Development Documentation and WeChat Small Program Design Guide, a new developer tool that integrates development and debugging, code editing and program publishing to help developers develop WeChat Small Programs simply and efficiently. Below are the official documents containing the download address and debugging guide for the small program developer tools.
Download: Developer Tools version 0.9.092300
windows 64；windows 32；mac version
In order to help developers develop WeChat Small Programs easily and efficiently, we have launched a new developer tool that integrates development and debugging, code editing and program publishing.
devtools
Swipe to log in
When launching the tool, the developer needs to scan the QR code to log in using the WeChat signal that has been successfully bound in the backend, and all subsequent operations will be based on this WeChat account
Program debugging has three main functional areas: simulator, debugging tools and applet operation area
simulators
The simulator mimics the real logic of WeChat apps on the client side, and is able to render the correct state for most of the APIs on the simulator.
emulat
Debugging Tools
The debugging tool is divided into six functional modules: Wxml, Console, Sources, Network, Appdata, Storage, and
3Wxml Pannel
Wxml Pannel is used to help developers develop Wxml transformed interfaces. Here you can see the real page structure and its corresponding wxss attributes, and you can modify the corresponding wxss attributes to see the modification in real time in the simulator. You can also quickly find the wxml code of the components in the page by using the selector in the upper left corner of the debug module.
wxml
Sources Pannel
Sources Pannel is used to display the script file of the current project. Unlike the browser development, the WeChat applet framework will compile the script file, so the file that the developer sees in Sources Pannel is the processed script file, and the developer's code is wrapped in the define function, and for the Page code, there will be an active call to require at the end of the For Page code, there will be an active call to require at the end.
sources
Network Pannel
Netwrok Pannle is used to observe and display requests and socket requests.
network
Appdata Pannel
Appdata Pannel is used to display the current moment appdata data of the current project, and provide real-time feedback on the project data situation, you can edit the data here, and provide timely feedback to the interface.
appdata
Storage Pannel
The Storage Pannel is used to display the current project's usage or after data storage.
storage
Console Pannel
The Console Pannel has two main functions:
Developers can enter and debug code here
console
The error output of the applet, which is displayed here
4 Small program operation area
The applet operation area helps developers simulate some client-side environment operations. For example, when a user returns to the chat window from an applet, it triggers an applet to be set as a background api.
5 When the small program is used to multi-window, you can switch pages in the top operation area, it should be noted that this operation only exists for the convenience of the developer, in the real WeChat client will not have.
The editing area allows you to work on writing code for the current project, as well as perform basic additions, deletions, and renaming of files.
The tool currently provides four types of file editing: wxml wxss js json
auto-complete
As with most editors, we provide sophisticated auto-completion.
Common Shortcut Keys
formatting
Ctrl+S: save the file
Ctrl+[, Ctrl+]: line of code indentation
Ctrl+Shift+[, Ctrl+Shift+]: Collapse to open code block
Ctrl+C Ctrl+V: copy and paste, copy and paste a line if no text is selected
Shift+Alt+F: Code Formatting
Alt+Up, Alt+Down: move up and down one line
Shift+Alt+Up, Shift+Alt+Down: copy one line up and down
Ctrl+Shift+Enter: inserts a line above the current line
Cursor Related
Ctrl+End: move to the end of the file
Ctrl+Home: move to the beginning of the file
Ctrl+i: selects the current line
Shift+End: selects from the cursor to the end of the line
Shift+Home: selects from the beginning of the line to the cursor
Ctrl+Shift+L: select all matches
Ctrl+D: select matches
Ctrl+U: Cursor Back
The project directory shows some details about the current project, including icons, appid, directory information, and so on.
Click on the preview function, the tool will automatically compile and build the code, and generate a code package to upload to the WeChat server, after the success of a QR code will be displayed, the developer with the new version of WeChat scanning the QR code can be on the phone to see the real performance of the corresponding project
It is important to note that during the beta phase, the code upload function is only available to the administrator's micro-signal.
The above is the WeChat small program download tool debugging information collation, follow-up to add related information, thank you for your support of this site!