一、背景与简介
在传统的 PC Web 前端开发中，浏览器为开发者提供了体验良好、功能丰富且弱小的开发调试工具，比方常见的 Chrome devtools 等，这些调试工具极大的不便了开发者，它们广泛提供查看页面构造、监听网络申请、治理本地数据存储、debugger 代码、应用 Console 疾速显示数据等性能。
然而在近几年衰亡的微信小程序的前端开发中，却少有相似的体验和性能对标的开发调试工具呈现。当然微信小程序的官网也提供了相似的工具，那就是 vConsole，然而相比 PC 端提供的工具来说的确无论是性能和体验都有所欠缺，所以咱们开发了 weconsole 来提供更加全面的性能和更好的体验。
基于上述背景，咱们想开发一款运行在微信小程序环境上，无论在用户体验还是性能等方面都能媲美 PC 端的前端开发调试工具，当然某些（如 debugger 代码等）受限于技术在以后期间无奈实现的性能咱们暂且疏忽。
咱们将这款工具命名为Weimob Console，简写为WeConsole。
该我的项目属于微盟前端开源我的项目之一，我的项目主页：https://github.com/weimobGrou...
二、装置与应用
1、通过 npm 装置
npm i weconsole -S2、一般形式装置
可将 npm 包下载到本地，而后将其中的dist/full文件夹拷贝至我的项目目录中；
3、援用
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,}4、倡议
如果不想将 weconsole 搁置在主包中，倡议将组件放在分包内应用，利用小程序的 分包异步化 的个性，缩小主包大小
三、性能
1、Console
- 界面如图 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
2、Api
- 界面如图 3
- 实时显示
wx对象下的相干 api 执行记录 Filter框输出关键字已进行记录筛选- 应用分类标签
All, Mark, Cloud, xhr...等进行记录分类显示，分类列表由配置项apiCategoryList与apiCategoryGetter产生 - 点击
按钮清空记录（不会革除留存的记录） 长按记录可弹出操作项（如图 4）：复制：将记录数据执行复制操作，具体模式可应用配置项copyPolicy置顶，未指定时，将应用零碎默认形式序列化数据（具体看实际效果），将其复制到剪切板- 其余操作项含意与
Console性能相似
- 点击条目可展现详情，如图 5
图 3
图 4
图 5
3、Component
- 界面如图 6
树结构显示组件实例列表
- 根是
App - 二级固定为
getCurrentPages返回的页面实例 - 三级及更深通过
this.selectOwnerComponent()进行父实例定位，进而确定层级
- 根是
- 点击节点名称（带有下划虚线），可显示组件实例详情，以 JSON 树的形式查看组件的所有数据，如图 7
图 6
图 7
4、Storage
- 界面如图 8
- 显示 Storage 记录
Filter框输出关键字已进行记录筛选- 点击
按钮清空记录（不会革除留存的记录） 长按操作项含意与Console性能相似- 点击条目后，再点击
❌按钮可将其删除 - 点击
Filter框左侧的刷新按钮可刷新全副数据 - 点击条目显示详情，如图 9
图 8
图 9
5、其余
- 界面如图 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
图 10
四、API
通过以下形式应用 API
import { showWeConsole, ... } from 'weconsole';showWeConsole();replace(scope:'App'|'Page'|'Component'|'Api'|'Console')
替换零碎变量或函数以达到监控，底层管制全局仅替换一次
restore(scope:'App'|'Page'|'Component'|'Api'|'Console')
还原被替换的零碎变量或函数，还原后界面将不在显示相干数据
showWeConsole()
显示WeConsole入口图标
hideWeConsole()
暗藏WeConsole入口图标
setUIConfig(config: Partial<MpUIConfig>)
设置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;}addCustomAction(action: WcCustomAction)
增加一个定制化我的项目；当你增加的我的项目中须要显示你本人的组件时：
- 请将 case 的
showMode值设置为component - 在
app.json中注册名称为weconsole-customer的组件 - 定制化我的项目的 case 被执行时，会将执行后果传递给
weconsole-customer的data属性 - 开发者依据
data属性中的数据自行判断外部显示逻辑
removeCustomAction(actionId: string)
依据 ID 删除一个定制化我的项目
getWcControlMpViewInstances():any[]
获取小程序内 weconsole 曾经监控到的所有的 App/Page/Component 实例
log(type = "log", ...args)
因为 console 被重写，当你想应用最原始的 console 办法时，能够通过该形式，type 就是 console 的办法名
on/once/off/emit
提供一个事件总线性能，全局事件及相干函数定义如下：
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
- 反对其余小程序平台（支付宝/百度/字节跳动）
六、License
WeConsole 应用 MIT 协定.
七、申明
生产环境请审慎应用。