Small program debugging new scheme - use WeConsole monitor console/network/API/component/storage

1. Background and Introduction

In the traditional PC Web front-end development, browsers provide developers with good experience, rich and powerful development and debugging tools, such as common Chrome DevTools, these debugging tools are greatly convenient for developers. They generally provide the ability to view page structures, listen for network requests, manage local data stores, debugger code, quickly display data using Console, and more.

But in recent years, the rise of micro channel small program front-end development, but few similar experience and function of the development and debugging tools appear. Of course, the official wechat mini program also provides a similar tool, that is vConsole, but compared with the tools provided by the PC terminal, it is deficient in both functions and experience, so we developed Weconsole to provide more comprehensive functions and better experience.

Based on the above background, we want to develop a small program running in wechat environment, whether in user experience or functions can be comparable to the PC end of the front-end development and debugging tools, of course, some (such as debugger code) limited by technology in the current period of functions we can not achieve for the time being ignored.

We named the tool Weimob Console, or WeConsole for short.

This project belongs to one of the front-end open source projects of Weimeng, the project homepage: github.com/weimobGroup…

Two, installation and use

1. Install via NPM

npm i weconsole -S
Copy the code

2. Install in common mode

You can download the NPM package locally and copy the dist/full folder to the project directory.

3, references,

WeConsole is divided into two parts, core and component, which can be used only after all references. The core is responsible for overwriting system variables or methods to achieve global monitoring. The component is responsible for displaying the monitored data.

To reference the core in the app.js file:

// NPM
import 'weconsole/init';

// Reference in normal mode
import 'xxx/weconsole/init';
Copy the code

After weconsole/ Init is introduced, App, Page, Component, Api and Console are all rewritten to monitor by default! If you want to rewrite on demand, you can do so as follows:

import { replace, restore, showWeConsole, hideWeConsole } from 'weconsole'; / / the scope of optional value: App/Page/Component/Console/Api
// Replace system variables or functions as needed to achieve monitoring
replace(scope); / / can restore
restore(scope);

// Use the show/hide method to control the display of entry ICONS
showWeConsole();
Copy the code

If not explicitly used showWeConsole/hideWeConsole method, the component initialization for the first time, according to whether the small program on debug mode to determine the entry display of ICONS.

To reference a component where it is needed, register it in app/page/ Component.json:

// NPM
"usingComponents": {
    "weconsole": "weconsole/components/main/index"
}

// Reference in normal mode
"usingComponents": {
    "weconsole": "xxx/weconsole/components/main/index"
}
Copy the code

Then initialize it in WXML using the

tag:

<! -- page/component.wxml -->
<weconsole />
Copy the code

The

tag supports passing the following attributes:

properties: {
    // The distance from the top of the window when the component is full-screen
    fullTop: String.// The distance from the top of the window when the components under the bang-screen model (such as iphone12, etc.) are full-screen
    adapFullTop: String,}Copy the code

4, advice,

If you do not want weconsole in the main package, it is recommended to use the component in the subpackage, taking advantage of the subpackage asynchronous nature of small programs to reduce the size of the main package

Three, functionality,

1, the Console

The interface is shown in Figure 1
Real-time displayconsole.log/info/warn/errorRecord;
FilterBox input keyword has been filtered records;
Use category labelsAll, Mark, Log, Errors, Warnings...And so on to record the classification display in the classification listAll, Mark, Log, Errors, WarningsIs a fixed item. Other items can be configuredconsoleCategoryGetterproduce
Click on the🚫Button to clear records (does not clearretainedThe record)
Long pressRecord the pop-up operation items (as shown in Figure 2) :
- copy: Replicates the recorded data. You can use configuration items to replicate the recorded datacopyPolicySpecifies, if not specified, will be usedJSON.stringifySerialize the data and copy it to the clipboard
- Cancel the top/top display: Cancel the top/top display of records, and a maximum of three top (top is to quickly find important data, when the important data is too much, it is not suitable to use the top, you can usetagFunction is then used in the filter barMarkClassification for screening display)
- Cancel retention/retention: Retention refers to the retention of records, so that it can not be cleared, namely click🚫The button is not cleared
- Cancel all retention: Cancel all retained records
- Unmark/tagThe: tag is to add data to aMarkYou can use the filter bar to display the categories quickly
- Unmark all: Cancels all marked records

Figure 1

Figure 2

2, Api

The interface is shown in Figure 3.
Real-time displaywxObject for the associated API execution record
FilterBox entered keywords have been filtered for records
Use category labelsAll, Mark, Cloud, xhr...The classification list is displayed by configuration itemsapiCategoryListwithapiCategoryGetterproduce
Click on the🚫Button to clear records (does not clearretainedThe record)
Long pressRecord the pop-up operation items (see Figure 4) :
- copy: Replicates the recorded data. You can use configuration items to replicate the recorded datacopyPolicyIf not specified, the data will be serialized to the clipboard using the system default (depending on the actual effect)
- Other operation items are the same asConsoleFunctions like
Click on the item to display the details, as shown in Figure 5

Figure 3

Figure 4.

Figure 5

3, Component

The interface is shown in Figure 6.
The tree structure displays a list of component instances
- The root isApp
- The secondary fixed isgetCurrentPagesThe returned page instance
- Pass level 3 and deeperthis.selectOwnerComponent()Determine the hierarchy by locating the parent instance
Click the node name (with a dotted line) to display the details of the component instance and view all the data of the component in a JSON tree, as shown in Figure 7

Figure 6.

Figure 7.

4, Storage

The interface is shown in Figure 8.
Display Storage records
FilterBox entered keywords have been filtered for records
Click on the🚫Button to clear records (does not clearretainedThe record)
Long pressOperation description AndConsoleFunctions like
After clicking on the entry, click again❌Button to delete it
Click on theFilterThe left side of the frameThe refreshButton to refresh all data
Click the entry to display the details, as shown in Figure 9

Figure 8.

Figure 9.

5, other

The interface is shown in Figure 10.
System information is displayed by default
throughcustomActionsConfiguration Items Allows you to quickly customize interface functionsaddCustomAction/removeCustomActionAdd/remove custom items
A few simple customization examples are shown in Figure 11:

import { setUIRunConfig } from 'xxx/weconsole/index.js';

setUIRunConfig({
    customActions: [{id: 'test1'.title: 'Display text'.autoCase: 'show'.cases: [{id: 'show'.button: 'look at'.showMode: WcCustomActionShowMode.text,
                    handler(): string {
                        return 'Test text'; }}, {id: 'show2'.button: 'look at 2'.showMode: WcCustomActionShowMode.text,
                    handler(): string {
                        return 'Test text 2'; }}]}, {id: 'test2'.title: 'shows the JSON'.autoCase: 'show'.cases: [{id: 'show'.button: 'look at'.showMode: WcCustomActionShowMode.json,
                    handler() {
                        returnwx; }}]}, {id: 'test3'.title: 'Display table'.autoCase: 'show'.cases: [{id: 'show'.button: 'look at'.showMode: WcCustomActionShowMode.grid,
                    handler(): WcCustomActionGrid {
                        return {
                            cols: [{title: 'Id'.field: 'id'.width: 30
                                },
                                {
                                    title: 'Name'.field: 'name'.width: 70}].data: [{id: 1.name: 'Tom'
                                },
                                {
                                    id: 2.name: 'Alice'}}; }}]}]});Copy the code

Figure 10.

Four, API

Use the API in the following ways

import { showWeConsole, ... } from 'weconsole';
showWeConsole();
Copy the code

replace(scope:’App’|’Page’|’Component’|’Api’|’Console’)

To replace a system variable or function for monitoring, the underlying control is replaced globally only once

restore(scope:’App’|’Page’|’Component’|’Api’|’Console’)

Restore the system variable or function that has been replaced. After restoration, the interface will not display relevant data

showWeConsole()

The WeConsole entry icon is displayed

hideWeConsole()

Hide the WeConsole entry icon

setUIConfig(config: Partial)

Set WeConsole configurations. The acceptable configuration items and their meanings are as follows:

interface MpUIConfig {
    /** After monitoring API data of small program, use this option to calculate the classification value of the data, and the result of calculation is displayed on the interface */apiCategoryGetter? : MpProductCategoryMap | MpProductCategoryGetter;/** After monitoring the Console data, use this option to calculate the classification value of the data, and the calculation result is displayed on the interface */consoleCategoryGetter? : MpProductCategoryMap | MpProductCategoryGetter;/** The API TAB displays a list of data categories. The all, mark, and other categories exist in */apiCategoryList? :Array<string | MpNameValue<string> >;/** Replication policy. If you pass in replication data, you can determine the type of data by the type field, such as API /console */copyPolicy? : MpProductCopyPolicy;/** Customize the list */customActions? : WcCustomAction[]; }/** Get prop */ corresponding to the category field value of the data
interface MpProductCategoryMap {
    [prop: string] :string | MpProductCategoryGetter;
}
interface MpProductCategoryGetter {
    (product: Partial<MpProduct>): string | string[];
}
interface MpProductCopyPolicy {
    (product: Partial<MpProduct>);
}
/** Customize */
interface WcCustomAction {
    /** Id, which must be unique */
    id: string;
    / * / * * headlines
    title: string;
    /** Which case is the default? * /autoCase? :string;
    /** What is the case for customization */
    cases: WcCustomActionCase[];
}

const enum WcCustomActionShowMode {
    /** Display the JSON tree */
    json = 'json'./** Display the data table */
    grid = 'grid'./** Fixed display < weconsole-Customer > component, which needs to be registered in app.json, and needs to support the input data property, the value of which is the result of the case Handler execution */
    component = 'component'./** Display a text */
    text = 'text'./** do nothing */
    none = 'none'
}

interface WcCustomActionCase {
    id: string;
    /** Button copy */button? :string;
    /** Execute logic */
    handler: Function;
    /** Display mode */showMode? : WcCustomActionShowMode; }interface WcCustomActionGrid {
    cols: DataGridCol[];
    data: any;
}
Copy the code

addCustomAction(action: WcCustomAction)

Add a custom project; When you add a project that needs to display your own components:

Please send the caseshowModeValue is set tocomponent
inapp.jsonThe registered name isweconsole-customerThe components of the
When the case of the custom project is executed, the result of the execution is passed toweconsole-customerthedataattribute
According to the developerdataProperty to determine the internal display logic

removeCustomAction(actionId: string)

Delete a custom item based on its ID

getWcControlMpViewInstances():any[]

Get all App/Page/Component instances that weconsole has monitored in the applet

log(type = “log”, … args)

Because console is overwritten, when you want to use the original console method, you can do so, and type is the name of the console method

on/once/off/emit

Provides an event bus function. Global events and related functions are defined as follows:

const enum WeConsoleEvents {
    /**UIConfig object changes */
    WcUIConfigChange = 'WcUIConfigChange'./** Entry icon displayability changes */
    WcVisableChange = 'WcVisableChange'./** When CanvasContext is ready, CanvasContext is used to calculate the interface text width of the JSON tree component */
    WcCanvasContextReady = 'WcCanvasContextReady'./** When CanvasContext is destroyed */
    WcCanvasContextDestory = 'WcCanvasContextDestory'./** When the width and height of the main component change */
    WcMainComponentSizeChange = 'WcMainComponentSizeChange'
}

interface IEventEmitter<T = any> {
    on(type: string.handler: EventHandler<T>);
    once(type: string.handler: EventHandler<T>);
    off(type: string, handler? : EventHandler<T>); emit(type: string, data? : T); }Copy the code

V. Follow-up planning

Optimizing package size
Unit testing
Experience optimization
Customized upgrade
Interface Weconsole based on network communication
standardized
Support the H5
Support for other small program platforms (Alipay/Baidu/Bytedance)

Six, License

WeConsole uses the MIT protocol.

The statement,

Use with caution in production environments.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Small program debugging new scheme – use WeConsole monitor console/network/API/component/storage

1. Background and Introduction

Two, installation and use

1. Install via NPM

2. Install in common mode

3, references,

4, advice,

Three, functionality,

1, the Console

2, Api

3, Component

4, Storage

5, other

Four, API

Use the API in the following ways

replace(scope:’App’|’Page’|’Component’|’Api’|’Console’)

restore(scope:’App’|’Page’|’Component’|’Api’|’Console’)

showWeConsole()

hideWeConsole()

setUIConfig(config: Partial)

addCustomAction(action: WcCustomAction)

removeCustomAction(actionId: string)

getWcControlMpViewInstances():any[]

log(type = “log”, … args)

on/once/off/emit

V. Follow-up planning

Six, License

The statement,

Small program debugging new scheme – use WeConsole monitor console/network/API/component/storage

1. Background and Introduction

Two, installation and use

1. Install via NPM

2. Install in common mode

3, references,

4, advice,

Three, functionality,

1, the Console

2, Api

3, Component

4, Storage

5, other

Four, API

Use the API in the following ways

replace(scope:’App’|’Page’|’Component’|’Api’|’Console’)

restore(scope:’App’|’Page’|’Component’|’Api’|’Console’)

showWeConsole()

hideWeConsole()

setUIConfig(config: Partial)

addCustomAction(action: WcCustomAction)

removeCustomAction(actionId: string)

getWcControlMpViewInstances():any[]

log(type = “log”, … args)

on/once/off/emit

V. Follow-up planning

Six, License

The statement,

Related Posts

Bootstrap5 zero Basic to Master section 14 Bootstrap5 slide navigation component usage

Recommend 9 Node.js learning, advanced, debugging analysis, actual combat of the heavy open source project 👍

What are the options for optimizing the first screen loading?