xiaohai Blog

使用 whistle 提升调试效率

October 08, 2021

痛点

  • 开发环节

需要切换环境时,现在有两种方式:

  1. 修改 Hosts,不方便
  2. 修改项目中的 proxy 配置,会重启项目
  3. 联调环节

后端:【再调一下试试】

  • 测试环节

当测试反馈了一个 bug,开发:【我这好好的】【我这复现不了】

  • 上线后

生产环境有 bug,如何本地调试

whistle 简介

whistle 是基于 Node 实现的跨平台 Web 调试代理工具,类似 Windows 平台 的 Fiddler,macOS 平台的 Charles。

快速上手

安装

安装 Node.js

Node.js 官网 安装最新的 LTS 版本

安装 whistle

npm install -g whistle

# 非 root 需要 sudo
sudo npm install -g whistle

安装浏览器代理扩展 SwitchyOmega

启动

whistle 安装完成后,可以使用几个一样的命令 wislwhistlew2wproxy

# 默认启动
w2 start

# 指定端口启动
w2 start -p 8080

# 重启
w2 restart

配置代理

配置 SwitchyOmega

安装后新建代理服务器 添加代理服务器

转发请求到 whistle 转发请求

使用设置的配置 使用配置

基础用法

抓包调试

访问 http://local.whistlejs.com/#network 查看管理页面

此时浏览器的请求会显示在这里 查看请求

切换环境

在 Rules 页面可以添加配置 添加配置

可以添加多份配置来切换环境

HTTPS

参考 文档 配置 HTTPS 证书

解决开头的痛点

  1. 环境切换
  2. 请求重放
  3. 导出导入

支持将请求导出到文件进行分享

也可以导入 Chrome DevToolsCharlesFiddler 导出的文件

备注:Chrome DevTools 也支持导出导入,但目前只能批量导出

进阶用法

修改请求与响应

请求修改:reqHeaders

响应修改:resHeaders

Mock 数据:使用 reqBody 替换本地文件

设置跨域

www.example.com resCors://enable

手机端调试

输出 log

www.example.com log://

注入 vconsole

安装inspect插件:

w2 i whistle.inspect

添加配置

www.example.com whistle.inspect://

其他

相关项目

GUI

抓包调试平台

Nohost

参考资源

官方文档