Skip to main content

Local Panels

With the introduction of Binance devTools 2.19.0 came new features, specifically, the mock data panel and audit panel.

Audit#

Instructions#

The audit panel reviews your mini app's implementations, delivering an estimation score indicative of its adherence to best practices.

With the latest version of Binance DevTools, new tools have been introduced to assist developers in applying best practices to their mini programs.

The Audit Panel can be used to measure just how closely your mini program adheres to suggested methods for optimizing performance and user experience.

Basic Usage#

  1. Click the Run button at the top-left (pictured below) and perform functions on the Mini Program interface. Upon running, the page will be scrutinized for "Experience Rating".

img.png

  1. Click Stop to cease the analysis, whereby an analysis report will appear, which you can use to refine your setup.
  2. If you want to rerun the experience rating, click Clear experience rating at the top of the report to reset. Do bear in mind that the system doesn't currently support report storage services. Once experience ratings have been cleared, they are no longer viewable.

img.png

Mock#

The mock data panel allows developers to mock all of the JS APIs of mini programs, making it possible to debug all features, especially those requiring native capabilities on the devtools, thereby saving significant development time.

In the interests of facilitating small program development, the developer tool offers API Mock capability, simulating the calling results of some APIs.

Instructions#

Basic Usage#

Find the entry for Mock in the Tab at the top of the tool debug panel and click + New Rule.

img.png

Example rule:

img.png

Result of hitting the rule above:

img.png

Rule Priority#

When multiple rules are set up for an API, the first rule will be matched first. Once a rule is hit, subsequent rules will not be executed.

Data Templates#

Complex simulated data needs can be served by data templates, designed for rapid generation of data to your specifications.

The syntax of the data template is from the open-source library Mock.js. For detailed syntax, review the project documentation.

Data previews are generated in real-time from the template in the template editor, aiding confirmation of the template's accuracy.

img.png

Rule Import and Export#

If you need to share rules with other project members, you can export the rule configuration in Mock, and then send the configuration file to other members for them to import. The operational entry is shown below:

img.png

Example#

Here's a getSystemInfoSync example of the import & export feature. It consists of three steps:

  • Create getSystemInfoSync mock Rules.
  • Export the rules as a config file to a local folder.
  • Import the local config file saved earlier in another project. You can use the append or cover mode to import the rules file.

img.png img.png img.png

Code Quality#

The latest version of Binance DevTools offers new tools designed to assist developers in applying best practices to their mini programs.

The Code Quality Panel allows you to scan your mini-program project and receive suggestions about resource sizing to improve performance.

applog-panel

AppLog#

The AppLog is designed to assist developers in fine-tuning the performance of their mini programs. It lists all records from the framework, providing detailed insights into how the framework will perform when rendering the mini program.

applog-panel

SourceMap#

To address issues where SDK errors in mini programs can't be restored, a SourceMap panel has been introduced.

Developers simply enter the row and column number where the copied and pasted error is located, then select the version and the corresponding file, which will ensure the source code can be displayed.

sourcemap-panel