Toolbar

Introduction

Situated at the top of the main page, the toolbar in Devtool houses the most frequently utilized features in the IDE. This guide will walk you through these features from left to right.

Toggle UI

By clicking 'Editor', 'Debugger', 'Simulator', you can show and hide these three areas respectively.

Refer to 'IDE Debugging' and 'Simulator' documents for more information.

Main Features

Compile Mode

By default, the initial startup page of the mini-app is the first page listed in the app.json file without any parameters.

To facilitate debugging of other pages or setting parameters, follow these steps:

1. Click the '+' sign in the dropdown list of this item to add a compile mode.
2. In the pop-up window, fill out the 'Mode Name', 'Page Parameters', and 'Global Parameters'. Then, select the 'Start Page' and click 'OK'.
3. The simulator will now display the new startup page with parameters automatically included.

Note: Check 'Simulation update at next refresh' in the pop-up window if you wish to simulate the effect of applet updating. See the 'UpdateManager' documentation for more details.

Preview

Use real machine preview to check the functioning of the API in a mini app.

Remote Debug

Developers can inspect logs and elements from the native IDE using remote debugging. Refer to the 'remote-debug' document for more information.

Clear Cache

Clear authorization data and file cache with a single click.

Upload

This feature allows you to upload your project code to the backend. The options available before uploading include:

• Upload version: Each time you upload, the version is incremented by 0.0.1 by default. This version should be greater than the online version to ensure each code version in the backend is unique.
• MSV: This stands for the minimum required SDK Version for your app. This is the lowest version your app can support.

Details

• Basic Info: This includes basic information about your app such as the appid, app name, local directory, output directory, etc.

The local directory indicates where your mini-app is located.

The output directory shows where your mini-app data is stored. This data includes the bundled app generated by the internal bundler, system data created by SDK, user data generated by mini-app users, and more. Click 'open' for more details.

• Performance Analysis: this is the same as 'Code Quality'. See the 'Code Quality' document for more details.

• Local Setting: Here you can change the SDK version and determine whether to validate the domain.

This involves whether to check the network request of the officially released mini-program (bn.request, bn.connectSocket, bn.downloadFile, bn.uploadFile) and whether the business domain name is allowed to be loaded by the '' component and has been configured as a legal domain name. Moreover, the TLS version of the domain name, the validity of the HTTPS certificate, and the server domain name can be configured in the MPP.

This option could be enabled during the development process. This way, the IDE will not verify the security domain name, '' business domain name, TLS version, and HTTPS certificate. This aids in conveniently completing the debugging work during development.

• Project Setting: Domain Info fetched from backend. You can edit these items by mp-admin site.

The security domain name information of the mini app will be displayed, and the legal domain name can be set in MPP