如何开发调试 Whistle 插件

2022-07-02 985 阅读2分钟

Whistle 是一个功能强大的 Web 抓包调试工具（Github：github.com/avwo/whistl…），且支持通过插件扩展满足业务定制要求。Whistle 插件可以用来做以下事情：

提供配置界面
作为请求 Server（直接响应或转发并修改请求响应）
统计请求信息（查看上报/打点数据等）
设置规则（动态，静态，全局及私有规则）
获取抓包数据
编解码请求响应数据流（pipe stream 功能）
扩展 Network 右键菜单
保存并同步 Rules & Values 数据
在 Network / Inspectors / Tools 自定义 Tab

下面以实现插件配置界面为例，介绍如何创建、开发、调试、发布一个 Whistle 插件，以及用户在使用插件出现问题时如何调试。

准备工作

以下功能需要安装最新的 Whisle 及插件脚手架 Lack：

npm i -g whistle lack

更新 Whistle 后需要重启：w2 restart

创建插件

新建一个名为 whistle.testui 的目录
命令行进入 whistle.testui目录，并执行 lack init
除了 Do you need uiServer? 填 y，其它默认回车即可生成包含配置界面的插件项目
安装项目依赖：
```
npm i
```

开发调试

Watch: 命令行进入插件项目根目录 whistle.testui/，执行命令 lack watch 后稍等几秒钟即可在 Whistle 界面的插件列表看到 testui 插件，打开插件的 Option 即为插件的配置界面
Debug: 通过 console.log 调试插件，如在上述插件的 lib/uiServer/index.js 里面添加如下一行日志：
重新打开插件配置界面 Option，即可在 lack watch 的命令行看到输出的日志：

发布插件

每个 Whistle 插件即为一个普通的 npm 包，因此发布插件只需执行：

npm publish

安装插件

Whistle 内置安装插件命令：

w2 install whistle.xxx

线上调试

用户在使用插件过程中出现问题如何在用户机器上调试？原理同开发调试，需要在用户安装脚手架 Lack，以及将用户的 Whistle 版本更新到最新版本（即重新安装并重启）：

找到用户插件安装目录

一般在 ~/.WhistleAppData/custom_plugins/@org/whistle.xxx/node_modules/@org/whistle.xxx 或 ~/.WhistleAppData/custom_plugins/@org/whistle.xxx/node_modules/@org/whistle.xxx，如果是通过 npm i -g whistle.xxx 安装直接在全局的 node_modules 目录查找除了
在插件根目录执行 lack watch，具体调试方法同上面的开发调试

参考资料