Skip to main content

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.

img

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

img

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

img

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.

img

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

img

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

img

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#

img img img

inspect tool#

  1. use Open inspect tool to add request header

img

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'  })},
  1. add your header

img

img

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.

img

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)

img

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.

img

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.

img.png

img.png

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.

img.png

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".

img.png

  1. Click Stop to stop analysis. You will then see an analysis report that you can use to make optimizations.
  2. 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.

img.png

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

img.png

example rule

img.png

Hit the above rule and get the following data:

img.png

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.

img.png

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:

img.png