# Interface

# Startup Page

# Login Page

On the login page, you can log in to the Weixin DevTools by scanning the QR code via Weixin and use this Weixin account to develop and debug Mini Programs in the DevTools.

# Project List

After login, you can see a list of existing projects and a list of code fragments.

In the project list, you can select Official Account web debugging to enter the Official Account web debugging mode.

# Creating a Project

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

1. A Mini Program AppID is required. Apply for a test account if you don't have an AppID.
2. The Weixin ID used for login should belong to the developer of the AppID.
3. Select an empty directory or a non-empty directory with app.json or project.config.json. When using an empty directory, you can decide whether to generate a simple project under the directory.

# Opening Multiple Projects

Weixin DevTools supports opening multiple projects at a time. Each project is opened in a new window. You can open projects by following ways:

1. Open the project selection page by clicking Projects > View all Projects in the menu bar of the project window, from which you can open projects.
2. Projects opened from the list of recently opened projects in the menu bar are opened in new windows.
3. Create a project
4. Open projects by calling DevTools via command line or HTTP request.

# Managing Projects

You can delete a local project or multiple local projects in batch.

# Main Interface

The main interface of Weixin DevTools includes (from top to bottom and left to right): the menu bar, the toolbar, the simulator, the editor, and the debugger.

# Menu Bar

Weixin Web DevTools

Switch Accounts: Quickly switch login users

About: About Weixin DevTools

Check for Updates: Check for version updates

Developer Forum: Go to the Developer Forum

Developer Documentation: Open the developer documentation

Debug: Debug the Weixin DevTools and the editor. If any bug is found, open the debugger to check whether there is an error log. You can report problems on the forum.

Switch to Developer Mode: Switch between Official Account web debugging and Mini Program debugging

Exit: Exit from the Weixin DevTools

Project

New Project: Quickly create a project

Recently Opened: Check the list of recently opened projects and open an appropriate project

Check All: Open the project list page of the startup page in the new window

Close Current Project: Close the current project and return to the project list page of the startup page

File

New File

Save

Save All

Close File

Edit: Check edit-related operations and shortcuts

Tools

Compile: Compile the current Mini Program

Refresh: It has the same feature as Compile. The shortcut ctrl(⌘) + R is retained for historical reasons.

Compilation Settings: Normal Compilation and Custom Compilation are available

Switch to Foreground/Background: Simulate the scenarios where Mini Program runs at the background and returns to the foreground

Clear Cache: Clear file cache, data cache, and authorization data.

Interface: Show/Hide the windows and modules on the main interface

Settings:

Appearance: Manage the editor's color themes, fonts, font sizes, and line spacing.

Editing: Manage the file saving behavior and how the editor behaves

Proxy: Select connecting directly to the Internet, system-wide proxy, or manual proxy setup

Notifications: Set whether to receive a certain type of notifications

# Toolbar

Click the user's profile photo to open the User Center, where you can easily switch users and view messages received by the DevTools.

To the right of the user's profile photo is a button to show/hide the main interface modules. At least one module should be displayed.

You can select normal compilation in the middle of the toolbar, or you can also create a project and select custom conditions to compile and preview it.

By clicking the Switch to Background button, you can simulate the scenario where the Mini Program runs at the background.

A shortcut used to clear the cache is available on the toolbar, making it easy to clear the file cache, data cache, and background authorization data in the DevTools, so as to help developers debug.

The right side of the toolbar shows the auxiliary features for development, where you can upload code, request for tests, upload files to Tencent Cloud, and view project information.

# Toolbar Management

Right-click a blank area on the toolbar to open the toolbar management.

# Simulator

The simulator is used to simulate how Mini Programs behave in the Weixin app. You can run the compiled codes of Mini Programs directly in the simulator.

You can select different devices or add custom devices to debug the compatibility of Mini Programs on devices of different sizes.

In the status bar at the bottom of the simulator, you can directly see the scene values, page paths and page parameters of the Mini Program that is currently running.

# Standalone Window

Click the button in the upper right corner of the simulator/debugger to display the emulator/debugger in a standalone window.