Skip to main content

Toolbar

Intro#

The toolbar of the Devtool is located at the top of the main page and contains the most commonly used features in the IDE. This article describes the features from left to right.

toolbar

Toggle UI#

Click Editor, Debugger, Simulator to show and hide these three areas respectively.

For more information, check out IDE Debugging and Simulator doc.

toggle.jpg

Main Features#

Compile Mode#

toggle.jpg

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

To quickly debug other pages or set parameters, please do the following.

  1. Click + in the drop-down list of this item to add a compilation mode.
  2. Fill in the Mode Name, Page Parameters, and Global Parameters in the pop-up window, select Start Page, and click OK.
  3. The simulator will then use the new startup page and automatically pass in the parameters.

Note: If you check Simulation update at next refresh in the pop-up window, you can simulate the effect of applet update. For more info, see UpdateManager doc.

Preview#

Use the real machine preview mini app to check the effect of the API call on the real machine.

Remote Debug#

Developer can inspect logs and elements from native IDE by using remote debug. For more info, check out remote-debug doc.

Clear Cache#

Clear authorization data, file cache with one click.

Upload#

toggle.jpg

Upload the project code to the backend. Options before uploading:

  • Upload version: The version is incremented by 0.0.1 by default each time you upload (this version must be greater than the online version) to ensure that each code version in the backend is unique.
  • MSV: Minimum required SDK Version for your app which is the smallest version your app support.

Details#

  • Basic Info: basic info of your app. ex: appid, appname, local directory, output directory and so on.

Local directory indicates where your mini-app is.

Output directory indicates where your data of you mini-app is. The data includes bundled app which generated by internal bundler, system data which generate by sdk, user data which generated by mini-app user and so on. For more details, click open.

detail1.jpg
  • Performance Analysis: same as Code Quality, check out Code Quality doc.
details2.jpg
  • Local Setting: you can change SDK version here and determin whether validate the domain or not.

The network request of the officially released mini program whether needs to check the network request (bn.request, bn.connectSocket, bn.downloadFile, bn.uploadFile) or not. And whether the business domain name allowed to be loaded by the component has been configured as a legal domain name , and the TLS version of the domain name, the validity of the HTTPS certificate. The server domain name and business domain name can be configured in the MPP.

This option can be turned on during the development process, and the IDE will not verify the security domain name, business domain name, TLS version, and HTTPS certificate, which helps to complete the debugging work more conveniently when developing.

details3.jpg
  • 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

detail4.jpg