On the login page, you can use WeChat to scan code and log in to the developer tools, which will use the information of this WeChat ID to develop and debug the Mini Program.
The developer tools provide two development modes to select from.
- Official Account website debugging. Selecting Official Account website debugging will directly take you to the Official Account website debugging interface. Then you can debug the website's WeChat authorization and WeChat JS-SDK features by entering the URL in the address bar.
- Mini Program debugging. Selecting Mini Program debugging will take you to the local project management page of the Mini Program. You can create or delete a local project, or choose to enter an existing local project.
Create a new project
A Mini Program project can be created locally when the following conditions are met
- A Mini Program AppID is required; if you don't have an AppID, you can apply for a Test account.
- The logged in WeChat ID needs to be owned by the developer of the AppID;
- You are required to select an empty directory, or a non-empty directory which contains
project.config.json. When selecting an empty directory, you can choose whether to generate a simple project in that directory.
Open multiple projects
The tools support opening multiple projects at the same time. A project will be opened in a new window each time. The portal has the following types:
- Open a project from the project selection page. When in the project window, you can open the project selection page from Project -> View All Projects in the menu bar.
- Projects opened from the list of Recently Opened Projects on the menu bar will open in a new window
- Create a new project
- Open projects with command line or HTTP calling tool
Delete and batch delete local projects
The main interface of the developer tools are (from top to bottom, from left to right): menu bar, toolbar, simulator, editor, and debugger.
WeChat web developer tools
Switch account: Quickly switch login users
About: About the developer tools
Check for Updates: Check for version updates
Developer Forum: Go to developer forum
Developer Guide: Go to Developer Guide
Debugging: Debug developer tools, debug editors; if you find a suspected bug in the developer tools or editor, you can open the debugging tool to see if there is an error log. Feel free to give us a feedback in the forum about the related issues.
Switch Developer Mode: Quickly switch Official Account webpage debugging and Mini Program debugging
Exit: Exit developer tools
Create a New Project: Quickly create a new project
Open Recent: You can view a list of recently opened projects and choose whether to enter the corresponding project
View All Projects: Open the project list page of the startup page in a new window
Close Current Project: Close the current project and return to the project list page of the startup page
Create a New File
Edit: To view edit-related actions and shortcuts
Compile: Compile the current Mini Program project
Refresh: In consistent with the compilation feature. Retaining the corresponding shortcut for historical reasons Ctrl(⌘) + R
Compilation configuration: To choose between normal compilation and custom compilation conditions
Frontend and Backend Switching: Simulate the operation of the Mini Program client entering the backend and returning to the frontend
Clear Cache: Clear file cache, data cache, and authorization data
Interface: Control the showing and hiding of the main interface window module
Appearance Settings: Control the editor's color theme, font, font size, and line spacing
Edit Settings: Control file saving behavior and the editor performance
Proxy Settings: Select direct network, system proxy, and manually set proxy
Notification Settings: Set whether to accept certain types of notifications
Click the user's profile photo to open Personal Center, where you can easily switch users and view messages received by the developer tools.
On the right side of the user's profile photo is the button that controls the showing/hiding of the main interface module. At least one module display is required.
You can choose Normal Compilation on the toolbar, or you can choose Create New and select custom conditions for compilation and preview.
With the backend switching button, you can simulate the Mini Program entering the backend.
A quick entry to clear cache is available on the toolbar. It allows you to conveniently clear file cache, data cache, and backend authorization data on the tools, which is convenient for developers to debug.
On the right side of the toolbar is the area for developing accessibility features, where you can upload code, request tests, upload Tencent Cloud, and view project information.
Right click on the toolbar to open Toolbar Management
The simulator can simulate the performance of a Mini Program on the WeChat client. The code of the Mini Program can be run directly on the simulator after compilation.
Developers can choose different devices, or add custom devices to debug the adaptation issue of the Mini Program on different-sized models.
On the status bar at the bottom of the simulator, you can clearly see the scene value, page path and page parameters of the currently running Mini Program.
Click on the button at the upper right corner of the simulator/debugger to display the simulator/debugger using a standalone window