关于小程序:小程序调试新方案使用WeConsole监控consolenetworkapicomponentstorage

0次阅读

共计 6224 个字符，预计需要花费 16 分钟才能阅读完成。

在传统的 PC Web 前端开发中，浏览器为开发者提供了体验良好、功能丰富且弱小的开发调试工具，比方常见的 Chrome devtools 等，这些调试工具极大的不便了开发者，它们广泛提供查看页面构造、监听网络申请、治理本地数据存储、debugger 代码、应用 Console 疾速显示数据等性能。

然而在近几年衰亡的微信小程序的前端开发中，却少有相似的体验和性能对标的开发调试工具呈现。当然微信小程序的官网也提供了相似的工具，那就是 vConsole，然而相比 PC 端提供的工具来说的确无论是性能和体验都有所欠缺，所以咱们开发了 weconsole 来提供更加全面的性能和更好的体验。

基于上述背景，咱们想开发一款运行在微信小程序环境上，无论在用户体验还是性能等方面都能媲美 PC 端的前端开发调试工具，当然某些（如 debugger 代码等）受限于技术在以后期间无奈实现的性能咱们暂且疏忽。

咱们将这款工具命名为Weimob Console，简写为WeConsole。

该我的项目属于微盟前端开源我的项目之一，我的项目主页：https://github.com/weimobGrou…

npm i weconsole -S

可将 npm 包下载到本地，而后将其中的 dist/full 文件夹拷贝至我的项目目录中；

WeConsole 分为 外围 和组件 两局部，应用时须要全副援用前方可应用，外围 负责重写零碎变量或办法，以达到全局监控的目标；组件 负责将监控的数据显示进去。

在 app.js 文件中援用 外围：

// NPM 形式援用
import 'weconsole/init';

// 一般形式援用
import 'xxx/weconsole/init';

引入 weconsole/init 后，就是默认将 App、Page、Component、Api、Console 全副重写监控！如果想按需重写，能够应用如下形式进行：

import {replace, restore, showWeConsole, hideWeConsole} from 'weconsole'; // scope 可选值：App/Page/Component/Console/Api
// 按需替换零碎变量或函数以达到监控
replace(scope); // 可还原
restore(scope);

// 通过 show/hide 办法管制显示入口图标
showWeConsole();

如果没有显式调用过 showWeConsole/hideWeConsole 办法，组件第一次初始化时，会依据小程序是否 开启调试模式 来决定入口图标的显示性。

在须要的中央援用 组件 ，须要先将组件注册进app/page/component.json 中：

// NPM 形式援用
"usingComponents": {"weconsole": "weconsole/components/main/index"}

// 一般形式援用
"usingComponents": {"weconsole": "xxx/weconsole/components/main/index"}

而后在 wxml 中应用 <weconsole> 标签进行初始化：

<!-- page/component.wxml -->
<weconsole />

<weconsole>标签反对传入以下属性：

properties: {
    // 组件全屏化后，间隔窗口顶部间隔
    fullTop: String,
    // 刘海屏机型（如 iphone12 等）下组件全屏化后，间隔窗口顶部间隔
    adapFullTop: String,
}

如果不想将 weconsole 搁置在主包中，倡议将组件放在分包内应用，利用小程序的分包异步化的个性，缩小主包大小

界面如图 1
实时显示 console.log/info/warn/error 记录；
Filter框输出关键字已进行记录筛选；
应用分类标签 All, Mark, Log, Errors, Warnings... 等进行记录分类显示，分类列表中 All, Mark, Log, Errors, Warnings 为固定项，其余可由配置项 consoleCategoryGetter 产生
点击 🚫 按钮清空记录（不会革除 留存 的记录）
长按 记录可弹出操作项（如图 2）：
- 复制 ：将记录数据执行复制操作，具体模式可应用配置项copyPolicy 指定，未指定时，将应用 JSON.stringify 序列化数据，将其复制到剪切板
- 勾销置顶 / 置顶显示 ：将记录勾销置顶 / 置顶显示，最多可置顶三条（置顶无非是想疾速找到重要的数据，当重要的数据过多时，就不宜用置顶了，能够应用 标记 性能，而后在应用筛选栏中的 Mark 分类进行筛选显示）
- 勾销留存 / 留存 ：留存是指将记录保留下来，使其不受革除，即点击🚫 按钮不被革除
- 勾销全副留存：勾销所有留存的记录
- 勾销标记 / 标记 ：标记就是将数据增加一个Mark 的分类，能够通过筛选栏疾速分类显示
- 勾销全副标记：勾销所有标记的记录

图 1

图 2

界面如图 3
实时显示 wx 对象下的相干 api 执行记录
Filter框输出关键字已进行记录筛选
应用分类标签 All, Mark, Cloud, xhr... 等进行记录分类显示，分类列表由配置项 apiCategoryList 与apiCategoryGetter产生
点击 🚫 按钮清空记录（不会革除 留存 的记录）
长按 记录可弹出操作项（如图 4）：
- 复制 ：将记录数据执行复制操作，具体模式可应用配置项copyPolicy 置顶，未指定时，将应用零碎默认形式序列化数据（具体看实际效果），将其复制到剪切板
- 其余操作项含意与 Console 性能相似
点击条目可展现详情，如图 5

图 3

图 4

图 5

界面如图 6
树结构显示组件实例列表
- 根是App
- 二级固定为 getCurrentPages 返回的页面实例
- 三级及更深通过 this.selectOwnerComponent() 进行父实例定位，进而确定层级
点击节点名称（带有下划虚线），可显示组件实例详情，以 JSON 树的形式查看组件的所有数据，如图 7

图 6

图 7

界面如图 8
显示 Storage 记录
Filter框输出关键字已进行记录筛选
点击 🚫 按钮清空记录（不会革除 留存 的记录）
长按 操作项含意与 Console 性能相似
点击条目后，再点击 ❌ 按钮可将其删除
点击 Filter 框左侧的 刷新 按钮可刷新全副数据
点击条目显示详情，如图 9

图 8

图 9

界面如图 10
默认显示零碎信息
可通过 customActions 配置项进行界面性能疾速定制，也可通过 addCustomAction/removeCustomAction 增加 / 删除定制我的项目
几个简略的定制案例如下，成果如图 11：

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

setUIRunConfig({
    customActions: [
        {
            id: 'test1',
            title: '显示文本',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    showMode: WcCustomActionShowMode.text,
                    handler(): string {return '测试文本';}
                },
                {
                    id: 'show2',
                    button: '查看 2',
                    showMode: WcCustomActionShowMode.text,
                    handler(): string {return '测试文本 2';}
                }
            ]
        },
        {
            id: 'test2',
            title: '显示 JSON',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    showMode: WcCustomActionShowMode.json,
                    handler() {return wx;}
                }
            ]
        },
        {
            id: 'test3',
            title: '显示表格',
            autoCase: 'show',
            cases: [
                {
                    id: 'show',
                    button: '查看',
                    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'
                                }
                            ]
                        };
                    }
                }
            ]
        }
    ]
});

图 10

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

替换零碎变量或函数以达到监控，底层管制全局仅替换一次

还原被替换的零碎变量或函数，还原后界面将不在显示相干数据

显示 WeConsole 入口图标

暗藏 WeConsole 入口图标

设置 WeConsole 组件内的相干配置，可承受的配置项及含意如下：

interface MpUIConfig {
    /** 监控小程序 API 数据后，应用该选项进行该数据的分类值计算，计算后的结果显示在界面上 */
    apiCategoryGetter?: MpProductCategoryMap | MpProductCategoryGetter;
    /** 监控 Console 数据后，应用该选项进行该数据的分类值计算，计算后的结果显示在界面上 */
    consoleCategoryGetter?: MpProductCategoryMap | MpProductCategoryGetter;
    /**API 选项卡下显示的数据分类列表，all、mark、other 分类固定存在 */
    apiCategoryList?: Array<string | MpNameValue<string>>;
    /** 复制策略，传入复制数据，可通过数据的 type 字段判断数据哪种类型，比方 api/console */
    copyPolicy?: MpProductCopyPolicy;
    /** 定制化列表 */
    customActions?: WcCustomAction[];}

/** 取数据的 category 字段值对应的 prop */
interface MpProductCategoryMap {[prop: string]: string | MpProductCategoryGetter;
}
interface MpProductCategoryGetter {(product: Partial<MpProduct>): string | string[];}
interface MpProductCopyPolicy {(product: Partial<MpProduct>);
}
/** 定制化 */
interface WcCustomAction {
    /** 标识，须要放弃惟一 */
    id: string;
    /** 题目 */
    title: string;
    /** 默认执行哪个 case？*/
    autoCase?: string;
    /** 该定制化有哪些状况 */
    cases: WcCustomActionCase[];}

const enum WcCustomActionShowMode {
    /** 显示 JSON 树 */
    json = 'json',
    /** 显示数据表格 */
    grid = 'grid',
    /** 固定显示 <weconsole-customer> 组件，该组件须要在 app.json 中注册，同时须要反对传入 data 属性，属性值就是 case handler 执行后的后果 */
    component = 'component',
    /** 显示一段文本 */
    text = 'text',
    /** 什么都不做 */
    none = 'none'
}

interface WcCustomActionCase {
    id: string;
    /** 按钮文案 */
    button?: string;
    /** 执行逻辑 */
    handler: Function;
    /** 显示方式 */
    showMode?: WcCustomActionShowMode;
}

interface WcCustomActionGrid {cols: DataGridCol[];
    data: any;
}

增加一个定制化我的项目；当你增加的我的项目中须要显示你本人的组件时：

请将 case 的 showMode 值设置为component
在 app.json 中注册名称为 weconsole-customer 的组件
定制化我的项目的 case 被执行时，会将执行后果传递给 weconsole-customer 的data属性
开发者依据 data 属性中的数据自行判断外部显示逻辑

依据 ID 删除一个定制化我的项目

获取小程序内 weconsole 曾经监控到的所有的 App/Page/Component 实例

因为 console 被重写，当你想应用最原始的 console 办法时，能够通过该形式，type 就是 console 的办法名

提供一个事件总线性能，全局事件及相干函数定义如下：

const enum WeConsoleEvents {
    /**UIConfig 对象发生变化时 */
    WcUIConfigChange = 'WcUIConfigChange',
    /** 入口图标显示性发生变化时 */
    WcVisableChange = 'WcVisableChange',
    /**CanvasContext 筹备好时，CanvasContext 用于 JSON 树组件的界面文字宽度计算 */
    WcCanvasContextReady = 'WcCanvasContextReady',
    /**CanvasContext 销毁时 */
    WcCanvasContextDestory = 'WcCanvasContextDestory',
    /** 主组件的宽高发生变化时 */
    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);
}

优化包大小
单元测试
体验优化
定制化降级
基于网络通信的界面化 weconsole
标准化
反对 H5
反对其余小程序平台（支付宝 / 百度 / 字节跳动）

WeConsole 应用 MIT 协定.

生产环境请审慎应用。

正文完

小程序

发表至：小程序

2021-08-06

0

关于小程序:小程序canvas大转盘

关于小程序:记录一次逆推小程序的实现逻辑

关于小程序:JavaScript正则表达式常用技巧

关于小程序:题库小程序之技术点总结

关于前端:双证在手运维无忧明道云通过两项国家级质量认证

关于小程序:小程序调试新方案使用WeConsole监控consolenetworkapicomponentstorage

一、背景与简介

二、装置与应用

1、通过 npm 装置

2、一般形式装置

3、援用

4、倡议

三、性能

1、Console

2、Api

3、Component

4、Storage

5、其余

四、API

通过以下形式应用 API

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

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

showWeConsole()

hideWeConsole()

setUIConfig(config: Partial<MpUIConfig>)

addCustomAction(action: WcCustomAction)

removeCustomAction(actionId: string)

getWcControlMpViewInstances():any[]

log(type = “log”, …args)

on/once/off/emit

五、后续布局

六、License

七、申明

站内搜索