Skip to main content

Local Panels

On the Binance devTools 2.19.0, we introduced a new feature, the mock data panel and audit panel.

Audit#

Instructions#

The audit panel can help review all the implementations of your mini app, and can return an estimation score to indicate whether your mini app applied the best practice.

The new version of Binance DevTools provided a series of new tools, to help the developer to apply the best practices to the mini program.

You can use the Audit Panel to measure the scores of your mini program how much it follows the suggested method to achieve better performance and user experience.

Basic usage#

  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

Mock#

The mock data panel can help the developers to mock all the JS APIs of mini programs, to enable debugging of all the features, especially the features that need the native capabilities on the devtools, which save much time when developing the mini apps.

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

Example#

Here is a getSystemInfoSync example about the import & export feature. It contains tree steps:

  • Create getSystemInfoSync mock Rules
  • Export the rules as a config file to local folder
  • Import the local config file that you saved before at other project(You can use append or cover mode to import the rules file)

img.png img.png img.png

Code Quality#

The new version of Binance DevTools provided a series of new tools, to help the developer to apply the best practices to the mini program.

You can use the Code Quality Panel to scan your mini-program project and get suggestions about the size of resource to improve performance.

applog-panel

AppLog#

The AppLog can help the developer to tune the performance of the mini program, by listing out all the records from the framework, indicating how the framework will perform in every detail when rendering the mini program.

applog-panel

SourceMap#

In order to solve the problem that the SDK error of mini program cannot be restored, we have added the SourceMap panel. The developer only needs to enter the row and column number where the copy-paste error is located, and then select the version and the file to which it belongs, and the source code can be displayed

sourcemap-panel