# 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:
- A Mini Program AppID is required. Apply for a test account if you don't have an AppID.
- The Weixin ID used for login should belong to the developer of the AppID.
- Select an empty directory or a non-empty directory with
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:
- 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.
- Projects opened from the list of recently opened projects in the menu bar are opened in new windows.
- Create a project
- 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
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
Edit: Check edit-related operations and shortcuts
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
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
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.
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.