Binance Devtools

This document will introduce how to use Binance Devtools.

IDE Usage

Create a new application

You can enter Create Project page from Project List page.

In the Create Project page, select an empty directory, IDE will generate a simple project under the directory.

Also you can create new project with @binance/mp-cli, CLI will generate a simple project by running:

$ bmp init [project-name]

Import an existing application

You can import an existing application from the directory with app.json and project.config.json

If you create the project with CLI, please run the following command in the root directory of the project:

$ bmp dev

And import the .bmp/build directory of the project.

Inspect with IDE

Select a project from Project List page, click Open to enter Main Interface, you can inspect your application.

Preview the developing application on the device

Login IDE with Binance account, and make sure APPID is correct (in the Details Panel). If you create the project with CLI, please run the following command in the root directory of the project to generate code for real device:

$ bmp build

Clicking Preview in the Tool Bar, IDE will bundle and upload your application. After uploading, IDE will generate a QR Code, you can scan the QR Code with Binance App to preview your application.

Upload to mini program platform

Login IDE with Binance account, and make sure APPID is correct (in the Details Panel). If you create the project with CLI, please run the following command in the root directory of the project to generate code for real device:

$ bmp build

Clicking Upload in the Tool Bar, IDE will bundle and upload your application. After uploading, you can manage the version from mpp website.

How to use devtools

login

inspect tool

1. use Open inspect tool to add request header

write your request (If the request url is error, It doesn't worked)

async onRequest(){
  await bn.request({
    url: 'https://www.devfdg.net/en/js-sdk-demo-ui/request'
  })
},

2. add your header

How to use remote-debug

Please make sure that you have logged in before using.

click Remote Debug button, If you see the picture below, it means successful execution.

Remote Debugging Window

Scan the QR code with your mobile phone to start remote debugging.

To end debugging, directly close this debugging window or click the End Debugging button in the lower right corner.

(Android is currently not supported)

debugger

In the debugger for remote debugging, you can debug code in the Console panel, view the source code of a Mini Program and perform breakpoint or single-step debugging in the Sources panel.

You can execute bn related functions in it.

Logical layer memory debugging

Developers can use the Memory panel in the Simulator to get the JS heap memory snapshot of the logic layer of the mini program, analyze the memory distribution, and solve the memory leak.

For detailed instructions, please refer to the Memory panel of chrome

Storage panel

The Storage panel is used to display the data storage of the current project after using bn.setStorage

You can delete (press the delete key), add, and modify data directly in the Storage panel.

Experience Rating

1. Click the Run button in the upper left corner (see the figure below) and perform operations on the Mini Program interface. When run, the page will be detected by "Experience Rating".

2. Click Stop to stop analysis. You will then see an analysis report that you can use to make optimizations.
3. If you need to run the experience rating again, you can click Clear experience rating at the top of the report to restore the original state. Please note that the system does not currently provide report storage services. Once the experience rating is cleared, you will no longer be able to view the rating.

API Mock

In order to make it easier for developers to develop small programs, the developer tool provides the API Mock capability, which can simulate the calling results of some APIs.

Instructions

Basic usage

The entry of Mock is in the Tab at the top of the tool debug panel, click + New Rule

example rule

Hit the above rule and get the following data:

rule priority

When multiple rules are configured for an API, the first rule will be matched first. When a rule is hit, the following rules will not be executed.

Use data templates

When the data to be simulated is complex, you can use data templates to quickly generate data that meets your requirements.

The syntax of the data template adopts the open source library Mock.js, and the detailed syntax can be viewed in the project documentation.

The data preview will be generated in real time according to the template below the template editor, which is convenient to confirm the correctness of the template.

Import and export of rules

When you need to share rules with other members in the project, you can export the rule configuration in Mock, and then send the configuration file to other members for import. The operation entry is as shown in the figure: