whistle 真机调试利器

whistle 是一个开源的抓包工具，功能和 Fiddler （Fiddler+willow在移动端调试吃力）、Charles 类似，在真机调试方面强大，可直接在pc上看页面日志和dom结构。赶紧放弃alert、vconsole。

优势主要体现一下方面:

1、全平台兼容

whistle 是用 Node 实现，跨平台支持，操作界面是Web网页。windows 、macOS系统可以平稳运行。启动浏览器网页进行控制和配置抓包。

2、快速安装

whistle只要2个命令行完成安装和启动。默认端口是8899，也可运行 w2 start -p 8888 来指定端口。

• 安装：

npm install -g whistle

• 启动：

w2 start
// 重启
w2 restart

• 需手动安装https 证书 （比较麻烦地方） PC端：打开127.0.0.1:8899 点击https,，弹窗里勾选Capture TUNNEL CONNECTs，然后点Download RootCA 下载并pc端安装证书（遇到“证书存储”步骤，需要手动选择“受信任的根证书颁发机构”）,然后重启whistle w2 restart。

移动端：浏览器扫一扫https的那个二维码进行证书安装、信任。

• 配合switchomega 插件，将代理转到8899， 或者手动设置系统代理。（比较麻烦地方）

• Rules setting 最好也勾选下。

  • Show line number
  • Auto line wrapping
  • Back rules first
  • Use multiple rules

• 设置rule 规则

# 打开所有的log
# /./ log://
# 对指定域名打开log
log:// **.xxx.com **.xx.cn
// 用于调试移动端页面
weinre://name **.xxx.com
// 文件代理 类似willow

就可以愉快的真机debug,也可愉快的console了。 最终类似如下

3、性能更好

whistle 通过 Node 进程运行，占用内存小，很稳定。

4、配置更灵活

• 更简洁的Hosts配置 想想Fiddler那一大串的Hosts配置，对比一下这里的一行。

121.111.11.1 **.xx.com **.xxx.cn .....

• 更方便的跨域设置

**.xx.cn/ resCors://enable

有些请求是插件的，可以转发，然后proxy 进行跨域处理。

https://xx.xxx.cn/bme-call-center/ http://127.0.0.1:8083/bme-call-center/
http://xx.xxx.cn/bme-call-center/ http://127.0.0.1:8083/bme-call-center/

• 本地mock

• 多端口启动 本地电脑可以开启多个端口抓包。比如用命令行：w2 start -p 8877 -S 就能本地启动另一个抓包端口 8877。 多一个端口的好处就是，别人在连你的一个端口体验或者测试，自己在另一个端口并行开发，互不干扰。 如何多端口启动

• 局域网共享

其他更多的看官方文档介绍。最大亮点真机调试

补充一个调试插件

npm i -g whistle.inspect

juejin.cn/post/703730…

whistle.inspect

官方文档

开源地址

安装过程参考