whistle 一个神奇的前端调试工具（抓包\代理工具）

在进行前端开发过程中，我们常常需要对一些接口进行处理，以及当后端接口没有弄好需要我们mock一些假数据，针对这些场景，我们就可以使用 whistle 来解决。
首先，我们要知道能满足我们需求的工具有很多，例如：charles、fiddler等。但是这些工具有个非常不友好的点，那就是它们需要 付费使用，当然我们一般都是通过一些方法，来免费使用的。这里就不说了。

1. 安装whistle

1. 首先我们要确保我们有安装node。

node -v

出现以下内容，就说明我们本地有安装node。

反之，我们就需要对node进行安装
1. Windows或Mac系统，访问 https://nodejs.org/，安装 LTS版本的Node，默认安装即可。
2. Linux下推荐使用源码安装: 从 Node官网下载最新版的 Source Code(或者用wget命令下载)，解压文件(tar -xzvf node-vx.y.z.tar.gz)后进入解压后的根目录(node-vx.y.z)，依次执行./configure、./make和./make install。

tips：(Windows系统可能需要重新打开cmd)

2. 使用包管理器安装

我们这里以npm为例，当然如果有安装yarn、pnpm等的话可以使用其他的包管理器进行安装。

npm install -g whistle

当我们使用 w2 help能有正常的信息展示就说明了，whistle安装成功了。

3. whistle命令

启动whistle:

$ w2 start

Tips: 如果要防止其他人访问，可以在启动时加上登录用户名和密码 -n name -w password。

重启whsitle:

$ w2 restart

停止whistle:

$ w2 stop

修改 whistle 监听的端口，默认为 8899

w2 start -p port

开启全局代理 (适用于无法安装Proxy SwitchyOmega等浏览器插件的朋友)

w2 proxy

关闭全局代理

w2 proxy off

2. 配置whistle工作环境

1. 浏览器插件安装Proxy SwitchyOmega

Tips： 若无法打开「chrome 应用商店」的朋友，可以使用上面的全局代理的方式进行启动whistle。

对插件进行配置

2. 安装根证书（捕获HTTPS请求）

正常启动后使用本地端口打开即可

这里以mac为例

找到证书下载地方，点击进行安装。

打开证书管理界面，找到带有 whistle 的字样的证书并对其进行「始终信任」

3. 简单配置规则进行实践

1. 设置响应头，临时允许跨域（用于解决后端暂未配置cors的时候，临时调试）

# 自动添加cors头 可以在服务器没有配置cors的时候，进行临时调试
https://www.baidu.com/ resCors://{resCors.json}

2. 对js增加一些调试信息(推荐使用VConsole，对H5、小程序以及移动端进行调试)

# 对一些页面预追加VConsole，便于移动端进行调试。
https://www.baidu.com/ jsPrepend://{log.js}

# https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.0/vconsole.min.js 将这个js保存然后# 初始化VConsole
new VConsole();

手机端等的环境进行调试，可能就需要安装证书了。我们点击右上角的online 查看本地的 IPv4

然后，找到和当前电脑处于同一个局域网Wi-Fi的手机，对wifi进行配置
代理方式：手动
代理服务地址：10.*.*.*（上述代理的 IPv4）
代理端口：8899（重要，重要，重要，此处代理的是whistle的启动端口）
然后手机访问 rootca.pro 下载证书，进行安装
ios 下：设置 => 通用 => 证书信任设置，打开刚刚安装的证书的开关
安卓： 设置=> 搜索证书 => 从存储设备安装证书 =〉进行安装即可

3. mock响应json数据

# mock测试需要的一些接口实际还未好但是开发确需要的假数据
https://www.baidu.com/api resBody://{res.json}

4. 线上js资源使用本地js进行替换

# a.js => b.js 其中b.js 可以是 http://localhost:4001/output/module/* 等形式
/passport.baidu.com/passApi/js/ {log.js}

当然，whistle还有很多调试的用法，这里就不一一列举了。

4. 可能出现的问题

• 本地代理 出现这种情况时，可以考虑将localhost 改为 127.0.0.1