Interface

Startup page

Login page

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.

Login

Mode selection

The developer tools provide two development modes to select from.

  1. 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.
  2. 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.

Mode selection

Create a new project

A Mini Program project can be created locally when the following conditions are met

  1. A Mini Program AppID is required; if you don't have an AppID, you can apply for a Test account.
  2. The logged in WeChat ID needs to be owned by the developer of the AppID;
  3. You are required to select an empty directory, or a non-empty directory which contains app.json or project.config.json. When selecting an empty directory, you can choose whether to generate a simple project in that directory.

Create a New Project

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:

  1. 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.
  2. Projects opened from the list of Recently Opened Projects on the menu bar will open in a new window
  3. Create a new project
  4. Open projects with command line or HTTP calling tool

Manage projects

Delete and batch delete local projects

Manage projects

Main interface

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

Project

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

File

Create a New File

Save

Save All

Close File

Edit: To view edit-related actions and shortcuts

Tools

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

Settings:

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

Toolbar

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.

Toolbar Management

Right click on the toolbar to open Toolbar Management

Simulator

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.

Standalone Window

Click on the button at the upper right corner of the simulator/debugger to display the simulator/debugger using a standalone window