whistle 一个神奇的前端调试工具（抓包\代理工具）
在进行前端开发过程中，我们常常需要对一些接口进行处理，以及当后端接口没有弄好需要我们mock一些假数据，针对这些场景，我们就可以使用whistle 来解决。
首先，我们要知道能满足我们需求的工具有很多，例如：charles、fiddler等。但是这些工具有个非常不友好的点，那就是它们需要付费使用，当然我们一般都是通过一些方法，来免费使用的。这里就不说了。
安装whistle
首先我们要确保我们有安装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)
使用包管理器安装
我们这里以npm为例，当然如果有安装yarn、pnpm等的话可以使用其他的包管理器进行安装。
npm install -g whistle当我们使用 w2 help能有正常的信息展示就说明了，whistle安装成功了。
whistle命令
启动whistle:
$ w2 startTips: 如果要防止其他人访问，可以在启动时加上登录用户名和密码 -n name -w password。
重启whsitle:
$ w2 restart停止whistle:
$ w2 stop修改 whistle 监听的端口，默认为 8899
w2 start -p port开启全局代理 (适用于无法安装Proxy SwitchyOmega等浏览器插件的朋友)
w2 proxy关闭全局代理
w2 proxy off配置whistle工作环境
浏览器插件安装Proxy SwitchyOmega
Tips： 若无法打开「chrome 应用商店」的朋友，可以使用上面的全局代理的方式进行启动whistle。
对插件进行配置
安装根证书（捕获HTTPS请求）
正常启动后使用本地端口打开即可
这里以mac为例
找到证书下载地方，点击进行安装。
打开证书管理界面，找到带有 whistle 的字样的证书并对其进行「始终信任」
简单配置规则进行实践
设置响应头，临时允许跨域（用于解决后端暂未配置cors的时候，临时调试）
# 自动添加cors头 可以在服务器没有配置cors的时候，进行临时调试
https://www.baidu.com/ resCors://{resCors.json}
对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 下：设置 => 通用 => 证书信任设置，打开刚刚安装的证书的开关
安卓： 设置=> 搜索证书 => 从存储设备安装证书 =〉进行安装即可
mock响应json数据
# mock测试需要的一些接口实际还未好但是开发确需要的假数据
https://www.baidu.com/api resBody://{res.json}
线上js资源使用本地js进行替换
# a.js => b.js 其中b.js 可以是 http://localhost:4001/output/module/* 等形式
/passport.baidu.com/passApi/js/ {log.js}
当然，whistle还有很多调试的用法，这里就不一一列举了。