小程序调试工具 we-debug众所周知，开发阶段、体验阶段是小程序研发过程中必不可少的环节，同时也是耗时最久的环节。

先看东西

背景

众所周知，开发阶段、体验阶段 是小程序研发过程中必不可少的环节，同时也是耗时最久的环节。两阶段中研发流程是否合理、配套设施是否健全，都会直接影响到小程序的迭代效率。

开发阶段

为了帮助开发者简单和高效地开发和调试微信小程序，官方推出了小程序开发者工具。

开发者工具功能十分丰富，可以满足我们本地开发的大部分需求，如：

模拟器
调试工具
自定义编译
特殊场景调试
...

这使得开发者在开发阶段效率得到质的飞跃。

体验阶段

这个阶段小程序开发者会上传代码包至微信服务器，生成开发版或体验版小程序用于特性验证。体验者可能是不懂开发的产品经理、老板或者其它项目成员。

有时特性的表现不符合预期，体验者在反馈问题时，会通过简单的描述、截图或录屏反馈给小程序开发人员。在这个过程中，由于信息的不完备性，常常不得不让小程序开发者与体验者反复沟通确认细节，或开展想象力进行地毯式的问题排查，不可避免地耗费大量时间与精力。

问题分析

对比开发阶段，体验阶段存在信息转化率低的问题：

开发阶段，小程序开发工具为开发者提供了丰富的调试信息，能够让开发者快速准确地实施本地的开发及问题定位。

体验阶段，体验者由于专业背景或条件限制，往往只能给出问题描述、截图、录屏等基础信息，开发者自身需要对这些信息进行消化理解，并尝试“翻译”成所需的技术术语。

业界参考

事实上，早在2016年，微信公众平台前端团队推出了前端开发调试利器 —— vConsole。它给开发者提供了快捷的方式查看移动端网页log日志。

随着版本的不断迭代，vConsole 功能已十分强大，然而，官方并没有开源小程序版本的 vConsole 方案，在开发版/体验版小程序中，点击 ··· 菜单会发现内置了该组件，使用时需要主动开启。其功能特性与 web 版本相比有所阉割，微信小程序内，vConsole 支持的特性有：

查看 console 日志
~~查看网络请求~~
查看页面 wxml 结构
~~查看 Cookies、localStorage 和 SessionStorage~~ 查看 localStorage
手动执行 JS 命令行
~~自定义插件~~

其次，官方对于调试器的定位是 “前端开发者”，对于体验者而言，要将 vConsole 中的有效信息提取出来是十分困难的。

we-debug 诞生

为了解决这类问题，当下需要设计一款全新的小程序调试工具。站在体验者的角度，需要尽可能做到简单易用的操作界面；站在开发者的角度，需要尽可能做到高可拓展性。于是 we-debug 诞生了。

基础视图

在操作界面上，we-debug 设计了两个基础视图：

状态徽章
调试面板

状态徽章

徽章（Badge）一般由左半部分名称和右半部分的值组成。由于这类小图标不仅简洁美观，还包含了清晰易读的信息，在 GitHub 的各类开源库中被广泛使用：

在 we-debug 中，徽章被设计为小程序自定义组件。样式上，Badge 组件参考了 GitHub 徽章；功能上，组件除了基本的信息展示，还新增了初始位置、可拖拽等特性。

调试面板

调试面板内，绝大多数调试功能以表单的呈现方式与体验人员交互，如：文字、Switch开关、Button 按钮等。能够让体验者弹高效地提取有效的调试信息。

事件通信

在小程序中，每个页面都是独立的一个实例，拥有各自独立的生命周期。

作为一个调试工具，必须是全局展示的。为保证每个页面中 we-debug 的数据及视图是同步的（如：徽章的位置信息、调试面板的 Switch 开关状态），我们在底层内置了一个“事件中心”，当体验者拖拽状态徽章、操作调试面板时，将触发订阅的相关事件，从而保持所有页面中调试 we-debug 数据、视图的同步更新。

插件

内置功能插件

we-debug 将视图组件、事件机制封装为核心（core）模块。调试规则的设定及获取则由其插件机制来实现。

如下插件中，一部分调试信息可以单纯通过小程序端的 API 获取，具有一定的通用性，we-debug 对这些插件进行了内置：

获取小程序页面路径
获取小程序页面参数
获取小程序错误日志

可选功能插件

通过全局方法 weDebug.use() 使用可选功能插件。它需要在你调用 weDebug.init() 初始化we-debug 配置前完成：

weDebug.use(MyPlugin)

weDebug.init({
  // ...配置项
})

也可以传入一个可选的选项对象：

weDebug.use(MyPlugin, { someOption: true })

定制插件

如果以上插件都不能满足你的需求，你可以考虑自己写一个定制插件。插件中可以调用核心模块中提供的任意 API：

use: 安装插件
init: 初始化 we-debug 配置
createCache: 创建缓存
event: 事件实例
store: 缓存数据
util: 辅助函数
createBadge: 创建徽章
getBadge: 获取所有创建的徽章
addBadge: 添加徽章到视图
removeBadge: 移除徽章
createFormRule: 创建调试规则
getFormRule: 获取所有创建的调试规则
addFormRule: 添加调试规则到视图
removeFormRule: 移除调试规则

we-debug 的插件应该暴露一个 install 方法。这个方法的第一个参数是 weDebug 本身，第二个参数是一个可选的选项对象：

MyPlugin.install = function (weDebug, options) {
  if (MyPlugin.installed) return
  MyPlugin.installed = true
  // 编写插件逻辑
}

参考案例

接下来我们要开发一个 vConsole 插件，完成后可以通过 we-debug 调试面板内的开关启用 vConsole 功能！

1. 新建插件文件

代码内核心流程如下：

创建启用开关状态缓存
创建插件规则
添加插件规则到视图

//  vConsolePlugin.js

const vConsolePlugin = {};
/**
 * vConsole 插件
 *
 * @param {*} weDebug
 * @param {*} [options={}]
 */

vConsolePlugin.install = function (weDebug, options = {}) {
  // 创建启用开关状态缓存
  const store = {
    vConsoleRuleState: weDebug.createCache('__vConsoleRuleState__')
  };
// 创建插件规则
  const vConsoleRule = weDebug.createFormRule(
    Object.assign(
      {},
      {
        title: '开启 vConsole 调试工具',
        desc: 'vConsole 是微信官方推出的调试工具',
        type: 'switch',
        state: {
          disabled: false,
          checked: () => store.vConsoleRuleState.get()
        },
        handler: {
         // 点击开关触发事件
          bindChange(state) {
            if (!state.disabled) {
              store.vConsoleRuleState.set(state.checked);

              wx.setEnableDebug({
                enableDebug: state.checked
              });
            }
          }
        }
      },
      options
    )
  );
 // 添加规则到视图
  weDebug.addFormRule([vConsoleRule]);
};

export default vConsolePlugin;

2. 初始化插件

将插件实例传入 weDebug.use 中


import weDebug from '@we-debug/core/libs/index'
import vConsolePlugin from 'your/path/vConsolePlugin'

weDebug.use(vConsolePlugin)
weDebug.init()

3. 效果预览

接下来，你就能在 we-debug 调试面板上看到 vConsole 的启用开关了。

写在最后

如果你对项目感兴趣，可以点击下方链接了解更多细节，如果你有好的想法，欢迎在项目中提出 issue 与我一起讨论。