网络协议
我们前端抓包，都是基于HTTPS的协议的抓包，也就是网络协议的最上层，可以简单复习一下网络协议：
在应用层来抓包，我们一般可以用Charles Proxy，whistle，别的工具也可以，但没有这两个好用 PS，如果想往网络协议的更底层抓包，我就会强力推荐Wireshark！
抓包需求
我们用抓包工具，都会有哪些常见的需求呢？
- 查看网络请求的request和response等信息
- 编辑网络请求并重新发送
- 修改网络请求的返回值
- 搜索网络请求
- 限速或者断点等
Charles和Whistle的对比
注：限于作者的使用习惯，本文只关注mac电脑上的安装和使用，其他平台上大同小异，请读者姥爷海涵。
| Charles | Whistle | |
|---|---|---|
| 查看请求和响应 | YES | YES |
| 重发和修改请求 | YES | YES |
| 修改网络请求的返回值 | YES | YES |
| 搜索网络请求 | YES | YES |
| 界面易用 | YES | NO |
| 上手简单 | YES | NO |
| 扩展度高 | NO | YES |
| 免费 | NO | YES |
简单的总结一下就是，Charles是一款花钱买来的简单易用的软件，但相应的，他的可扩展性比不上whistle。
Charles简介
界面
安装步骤
从这里下载DMG软件，然后双击安装即可。试用期一个月，试用结束之后就需要购买，每次购买可以无限期使用，当前大版本提供的更新也都可以免费安装。
核心设置
想要抓取浏览器上的网络请求，有两个核心步骤需要做。
- 设置浏览器的代理
- 安装和信任根证书（抓包HTTPS请求时需要）
让浏览器把我们的Charles作为代理这一步，但这一步Charles会自动帮我们做掉，不需要我们手动来干预。 另一项需要我们手动干预的就是HTTPS的抓包，Charles是可以作为HTTPS请求中的中间人，来直接明文看到HTTPS的请求内容，关于"中间人"。这个就是安装Charles的证书，并且"始终信任"这个证书！可以参考下面这张图：
开启Charles之前的证书：
注意看颁发者，这里是Google，谷歌是可以颁发HTTPS证书的。可以再看下百度的，百度的HTTPS证书是GlobalSign。 
开启Charles之后的证书：
可以明显的看到，这个证书是我的电脑颁发的，而且我设置了"信任 "，所以这个证书在浏览器看来就是有效的。 
Whistle简介
界面
注意Whistle的使用，UI界面和启动命令是分开的，我们要先在命令行里面通过w2 start来启动软件，然后就可以通过浏览器来查看抓包情况 
Whistle的抓包的网络请求跟Charles的很大的不同就是：
不同点
（一）请求的罗列方式
Charles可以按照域名维度来组织这些网络请求，而Whistle默认罗列这些请求（当然可以按照各种规则来排序）。如果你习惯了按照域名维度来组织抓到的包，可以在Whistle里面点击鼠标右键"Open"->"Tree View"来切换成和Charles一样。注意，具体用哪种方式，取决于使用时的情景。
（二）查找结果的展示方式
Charles是用一个单独的弹窗来展示搜索结果，里面可以看到具体的匹配点：
而Whistle只是罗列出匹配到的网络请求，但无法清楚的看到具体的匹配点，只能我们自己再去过滤：
修改请求
如果只是通过界面上来修改请求，然后重发，那两个工具基本是一样的，类似下面：
但如果是想要定制化的用一些规则来修改请求，两个软件都可以做到，只是做法的侧重点不一样
Charles主打UI简单易用
Charles的做法就是要在界面上解决这些问题，可以从菜单的"Tools"->"Rewrite"来打开下面的截图。图中我是给"www.baidu.com" 域名下的所有请求都加了一个自定义的headerNewVersion: 111。其它的规则这里就不详细展开了，但可以看出，Charles一样可以完成很复杂的过滤规则和替换规则。 
Whistle主打pattern operatorURI
pattern operatorURI可以这么理解：匹配规则 对应的操作 继续用上面那个给"www.baidu.com" 域名下的网络请求添加自定义headerNewVersion: 222（避免跟上面一样，防止是Charles添加的，我们看成Whistle添加的），那我们就需要这么写： 然后刷新百度的页面，就可以看到刚才添加的header：
ini
https://www.baidu.com reqHeaders://(NewVersion=222)上面这个就是替换header（如果不存在就新增一个header）的写法，注意小括号，这里小括号里面就是我们要修改的header。 
修改响应
这个如果是一些简单的文本替换，那跟上面修改请求基本就是类似的。也都能实现下面这些替换方式：
- 文本查找替换
- 正则查找替换
- 替换为文件
Charles独有的功能：Map Remote，这个就是直接映射到远程的另一个服务器。
Whistle独有的功能：
- 匹配时可以指定方法
之所以提这个是因为，如果你想替换一个跨域的请求的响应值，就必须指定方法，第一个跨域请求options不需要替换（替换了就挂了，后续的请求会因为跨域失败而不会被浏览器发送）
- 可以通过插件实现非常复杂的功能，比如：
- 为页面注入vConsole。
- 动态设置匹配规则（上面提到的那些规则都是静态的，写死的，这里可以通过JS来动态的写规则）
- 注入类似Chrome的Web Inspector的工具，可以远程调试页面。
作者总结
如果你只是偶尔用一下抓包工具，也不太需要修改请求和响应，那Charles的UI会很好用，打包了你所需的很多功能，至少常见的修改他都能搞定
如果你是前端开发人员，需要频繁地抓包，以及修改，甚至积累一些常见的网络请求的替换值，那你一定要坚持用Whistle，虽然他上手有些难度，但用熟了之后，效率是比Charles还要高的。