Binance Devtools
This document will introduce how to use Binance Devtools.
#
IDE Usage#
Create a new applicationYou 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:
#
Import an existing applicationYou 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:
And import the .bmp/build directory of the project.
#
Inspect with IDESelect a project from Project List page, click Open to enter Main Interface, you can inspect your application.
#
Preview the developing application on the deviceLogin 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:
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 platformLogin 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:
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- use
Open inspect tool
to add request header
write your request (If the request url is error, It doesn't worked)
- add your header
#
How to use remote-debugPlease 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 WindowScan 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)
#
debuggerIn 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 debuggingDevelopers 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 panelThe 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- 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".
- Click Stop to stop analysis. You will then see an analysis report that you can use to make optimizations.
- 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 MockIn 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 usageThe 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 priorityWhen 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 templatesWhen 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 rulesWhen 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: