由于最近负责的APP又要更新迭代了，所以我特别关注产品体验如何，尤其是一些细小的体验，比如接口的请求时长，请求大小等。加上自己一直是一个爬虫爱好者，所以对抓包工具一直有所研究。今天就分享一款抓包神器Charles。
为什么要抓包
要理解为什么要抓包，首先我们来看下网络抓包的定义：
抓包（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。
以上是来自百度百科的定义。我们都知道，不论是B/S架构，还是C/S架构的产品，或多或少都会与服务器进行数据交互。也就是定义所说的网络数据的发送与接收，通过抓包，我们可以进行接口传参的数值修改，得到想要的数据。
在WEB产品中，我们可以通过浏览器的开发工具Network来进行网络抓包；在移动APP中，通过抓包工具也可以轻松实现抓包。
那抓包到底有什么用呢？以下我列几个使用场景：
- 测试单个页面数据请求的数据、大小；
- 查看页面请求接口的安全验证；
- 获取某个APP的数据接口，进行数据爬取；
单个页面数据请求大小其实就是Network中的请求时间，为了产品体验更好，接口的响应时间需要尽可能的快，哪怕是弱网环境下也应该很快；经常我们在使用一款APP的时候，会说：”这个APP用起来很慢“，其实APP慢90%的原因都是服务器问题，真正因为手机硬件跟不上导致卡顿的比例极低。既然是跟服务器相关，那么通过抓包工具就可以轻易的测试出来接口返回数据的大小。
我通过抓了一些APP的接口来看，有部分APP接口安全性做的极差，举个例子，登录接口用GET方法，用户名与密码均明文上传；然后一些隐私数据的接口没有任何安全验证手段，直接GET即可请求回数据，有时候我也在想，如果有恶意的人拿这些裸奔的接口干一些坏事，会有什么后果？
最后一个就是我经常用来爬数据的，比如某电商产品的商品列表，通过抓包可以清楚看到一共有多少款商品，商品都是什么价格等等，用来做爬虫会非常方便。
抓包工具的选择
其实抓包工具貌似还不少，我自己了解了两款。
| 名称 | 是否收费 | 平台 |
|---|---|---|
| Charles | 收费 | WIN/MACOS |
| Fiddler | 免费 | WIN |
最后为什么选择了Charles，只能说机缘巧合吧，Fiddler在macos上安装貌似太麻烦了，而Charles安装起来则相当的简单。如何安装这里就不赘述了，点击下面的下载地址直接下载即可，破解版自己可百度谷歌，很简单就可以找到。
Charles下载地址
Charles工作界面介绍
主界面视图介绍
由于工具是纯英文界面，所以需要一段时间来适应。对于有开发经验的同学来说则不会太陌生；首先介绍下Charles的两种工作界面：
- Structure：树状结构显示，将网络请求按访问的域名分类；
- Sequence：水平结构显示，将网络请求按访问的时间排序
其中，structure类似于chrome开发者工具的sources，可以查看到目录下面都请求了哪些服务器：
上图为新浪微博热门微博的评论数据，在structure界面中找起来还是有些麻烦的，但是在sequence界面中找起来则相当方便，见下图：
可以清楚的看到接口的请求地址，两种方式各有优势，实际应用过程中按需自取。
工具导航栏介绍
由于不想放太多图片，这里就以文本介绍描述了。
| 名称 | 功能 |
|---|---|
| 小扫帚 | 清除捕获到的所有请求 |
| 红点 | 红色状态表示正在抓取网络请求，灰色状态表示停止了网络抓取请求 |
| 小乌龟 | 灰色状态说明是没有开启网速节流，绿色状态说明开启了网速节流 |
| 六边形 | 灰色状态说明是没有开启断点，绿色状态说明开启了断点 |
| 笔 | 编辑修改请求，点击之后可以修改请求的内容。（可用来修改请求参数） |
| 刷新 | 重复发送请求，点击之后选中的请求会被再次发送 |
| 对勾 | 验证选中的请求的响应 |
| 扳手起子 | 常用功能，包含了 Tools 菜单中的常用功能 |
| 设置 | 常用设置，包含了 Proxy 菜单中的常用设置 |
菜单介绍
Charles 的主菜单包括：File、Edit、View、Proxy、Tools、Window、Help。用的最多的主菜单分别是 Proxy 和 Tools。
Proxy 菜单包含以下功能：
| 名称 | 说明 |
|---|---|
| Start/Stop Recording | 开始/停止记录会话 |
| Start/Stop Throttling | 开始/停止节流 |
| Enable/Disable Breakpoints | 开启/关闭断点模式 |
| Recording Settings | 记录会话设置 |
| Throttle Settings | 节流设置 |
| Breakpoint Settings | 断点设置 |
| Reverse Proxies Settings | 反向代理设置 |
| Port Forwarding Settings | 端口转发 |
| Windows Proxy | 记录计算机上的所有请求 |
| Proxy Settings | 代理设置 |
| SSL Proxying Settings | SSL代理设置 |
| Access Control Settings | 访问控制设置 |
| External Proxy Settings | 外部代理设置 |
| Web Interface Settings | Web 界面设置 |
在实际使用过程中，由于我只是单纯的抓包，所以其实菜单用到的并不多，所以暂时这块不做详细描述，后续用到了再来更新。
开始抓包
客户端设置(MAC/WIN)
- 查看本机IP地址
首先需要知道自己的本地IP地址。但如何要知道自己的IP地址呢？
- 在终端输入
ifconfig； - 打开系统偏好设置-网络；
- 打开Charles-Help-Local IP Address;
- 设置端口
打开Charles，选择Proxy->Proxy Setting->Proxies：
设置HTTP PROXY的端口（PORT)为8888，然后勾选下方的enable transparent HTTP proxying；到这里客户端的设置就完毕了。
手机端的设置(IOS/Android)
打开手机，连接跟客户端同个网络环境下的WIFI，然后设置代理，代理模式选手动，服务器地址填客户端设置中第一步找到的IP地址，端口填8888（上文设置的端口）。到了这一步，还没真正的成功，只有当手机成功连接到电脑的时候，电脑会弹出一个connect from X.X.X.X的弹窗，这就表示连接成功了，点击”allow“，也就是表示同意，然后就可以愉快的抓包了。
但是这个时候还只能抓取到http（80端口）的数据，要抓取https，就需要安装证书。抓包成功请参考上文的图片。
为什么要设8888？我也不知道，所有的教程中都是这么写的，手动摊手.jpg
抓取https的包
安装证书这块其实没多少好说的，首先打开Charles，选择Help->SSL Proxy->Install Charles Root Certificate,手机端的也差不多，点击proxy官网的证书下载，然后下载到手机即可。
安装其实很简单，但这个地方一定要特别注意一点！！！就是一定要信任证书，我一开始在这里研究了好久，就我两个设备证书都安装了，没问题啊，但https的接口还是没法抓取，但后来发现了，macos跟ios都必须要信任刚刚安装的证书才行，不会信任证书的自行百度。
给你的服务器来一次压力测试
其实我一直都有听说过压力测试，但我不是专业测试，所以有的时候我喜欢研究一些好玩的东西，正好发现Charles可以利用抓取到的接口开始打压，在抓取到的接口点右键->Repeat Advanced，这个功能还挺好的，我在另一个博主的分享中看到了，可以利用这个功能来刷票，比如一个账号一天可以投N次票，利用这个功能就可以重复给接口喂数据，当数据量大的时候就相当于压力测试了。
- Iterertions：并发线程；
- Concurrency：打压次数；
不过这个功能我研究的不深，也还没遇到实际的这种场景，就发现用来刷票还蛮不错的。
TIPS
- 不抓包请关闭手机HTTP代理，否则断开与电脑连接后会连不上网；
- Charles搭配Postman效果极佳，后续考虑写一篇Postman的教程；
参考资料：
Charles 功能介绍和使用教程
Charles 从入门到精通
charles抓包的安装，使用说明以及常见问题解决(windows)
