whistle是一个基于Node实现的跨平台web调试代理工具，类似Windows上的Fiddler，Mac上的Charles，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用，不同于Fiddler通过断点修改请求响应的方式，whistle采用的是类似配置系统hosts的方式，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式，且可以通过Node模块扩展功能。

虽然长期以来一直使用的工具是Fiddler，但当我看到whistle的第一眼，就果断抛弃了Fiddler，转而使用whistle，诸多原因，我们下面一一来聊：

1、我们先看看whistle的官方文档：https://wproxy.org/whistle/，点进去看的第一感觉这工具很强大，很灵活，而对比Filddler和Charles，功能比较弱，而且使用不是太灵活。

2、支持多种匹配规则的配置方式，而且规则还支持变量，使用下来就两个字：舒服，而Fiddler和Charles规则配置都有些困惑，特别死Charles规则的配置方式很死板。

3、支持使用动态规则，通过w2 use来导入动态的规则，很容易可以和项目编译流程打通，比如我们在项目根目录下新建whistle.cfg.js，内容：

const { name } = require('./package.json');
const path = require('path');

function resolve(pathname) {
  return path.resolve(__dirname, pathname);
}

module.exports = {
  name,
  rules: `
/www.test.com/commons.js/ ${resolve('./dist/commons.js')}
`
};

然后在编译命令运行之前，运行w2 use ./whistle.cfg.js，我们就可以导入一个以我们的项目名称为名字的规则列表（目前只有一条），而这段${resolve('./dist/commons.js')代码最终也会被替换为真实的项目路径。

4、支持hosts指向更改，而且无缓存，我们再也不需要去一层层去找hosts文件，再也不用关心更改的hosts是否生效了，再也不用去纠结Windows和Mac下hosts文件的存放位置，一条规则搞定：

www.test.com 118.118.118.118

5、支持各种请求和响应更改

6、原生支持远程调试，我们只需要加一条规则就可以搞定：

 www.example.com weinre://example

..., 好处实在是太多，这里就不再多做介绍，有兴趣的朋友可以自行去研究，我们还是回到本文的主旨，手机端抓包和调试。

要进行手机端抓包，我们需要在手机上设置代理指向运行的whistle机器的特定端口（默认8899），IPhone和安卓手机设置代理的方式大同小异，这里主要介绍一下IPhone的设置方式：

1、打开手机上面的“设置”功能，进入手机的系统功能设置，如图所示。

2、进入手机的设置功能之后，选择“无线局域网”，点击进入，如图所示。

3、进入无线局域网之后，选择一个要设置HTTP代理的网络，点击进入，如图所示。

4、进入该网络配置之后，下拉页面，找到HTTP代理模块的“配置代理”，点击进入，如图所示。

5、进入配置代理的模块后，可以看到状态是关闭的，点击其中的“手动”，如图所示。

6、点击手动之后，就会出来一个模块让填写代理服务的ip和端口，正确输入即可，然后点击右上角的“存储”，如图所示。

设置完代理后，我们已经可以抓http网站的包，但是如果我们访问https的网站，会发现会提示证书有问题，我们需要安装并信任证书，证书安装我们可以通过Safari（一定要是Safari）访问：http://电脑ip:8899，

依次点击步骤一和步骤二下载证书，步骤三开启https抓包，证书下载完毕后，我们可以在描述文件中找到下载的证书并点击安装：

安装证书后我们需要信任证书，在“设置”>“通用”>“关于本机”>“证书信任设置”。在“针对根证书启用完全信任”下，开启对这个证书的信任。

到这里我们就可以抓手机上的https的包了，但是我们如何调试手机端的页面呢？

1、我们可以通过上面介绍的weinre来开启whsitle自带的远程调试工具

2、我么可以利用log来远程来查看远程控制台或者打印变量

3、我们可以通过resPrepend或resAppend配合本地文件或者变量来向手机端页面注入调试面板，比如eruda。例：

新建规则：

www.example.com resAppend://{append}

新建变量append，内容为：

<script src="http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js"></script>

开启规则后，我们在请求www.example.com网站的时候就会自动注入eruda调试面板，通过调试面板我们可以方便的对手机端页面进行调试。

写在最后：

1、如果上面步骤都完成后，我们依然无法抓包，考虑是电脑端防火墙的原因，我们可以选择关闭防火墙和本地的杀毒软件，当然也可以放行8899端口，不过设置稍微有些繁琐。

2、手机抓包结束后，记得恢复代理为关闭，不然会影响后续正常情况下的请求发送。