1. 介绍
1.1 charles介绍
Charles 是在 PC 端常用的网络封包截取工具，在做移动开发时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。通过一定的配置，Charles 还可以分析 Https 协议。
1.2 使用背景
在前端人员开发h5页面时，有时会出现来不及给出接口文档的情况，我们对于要使用的接口，或者需要传递的参数会比较陌生；此时若app端或者pc端的接口已经跑通，我们只需要把它迁移到web页面中来，这时就可以借助charles工具，捕获app端发的请求和响应。
在测试工作中，相信这也是接口测试的优秀工具。
2. 安装和破解
2.1 安装
打开浏览器，访问charles官网的下载页面，下载对应自己系统的版本即可： Charles 官方下载页面
下载完成后，直接运行安装程序即可。
2.2 破解
因为charles是一个付费工具，如果我们直接使用的话，会提示只有30天的有效期。我们可以借助破解工具对charles进行破解，从而让它长期有效。 破解工具地址：zzzmode.com/mytools/charles/
2.2.1 破解流程
- 首先打开浏览器进入charles破解页面：zzzmode.com/mytools/charles/
- 在输入框中随机输入一个注册名后点击生成，获取到激活码。注册名可随意填写
- 打开charles，点击Registered Charles…
- 输入在破解网站生成的名称和激活码
- 成功，点击确定。
注意：激活码只能使用一次，如果需要重新破解，则再次点击生成即可。
3. 配置
这时我们已经获得了永久可使用的charles软件，我们还需要进行一些配置才能对手机中的app抓包
3.1 配置步骤
- 电脑本地安装charles证书
- 查看电脑charles的IP和端口号
- 手机连接charles，抓取简单的http
- charles设置ssl proxy setting
- 手机安装charles证书
进行完上面五个步骤的设置，就可以抓取http和https的手机包了。
3.2 配置流程
3.2.1 电脑本地安装charles证书
之后一路勾选，直到这一步：
点击下一步后，会显示导入完成。
3.2.2 查看电脑charles的IP和端口号
- 记住电脑上charles的IP和端口，在这里我是192.168.124.3:8888
- 在手机与电脑连在同一个网络的情况下，我们需要把代理切换为手动，填写上面的主机名和端口号。
- 设置完后电脑端出现上图界面，点击allow即可(通常需要等待一段时间才能弹出这个页面)
- 此时我们已经可以抓取http请求了，但并不能抓取https请求。（图片是我手机启动微博后抓取的请求，因为我已经进行了配置，所以可以抓取到https）
3.3 抓取https需要进行的配置
3.3.1 电脑端配置
- 点击SSL Proxying Settings
- 配置端口规则
add添加
Host： * Port：443 Host： * Port：*
3.3.2 手机端配置
链接好代理后，手机打开浏览器输入： chls.pro/ssl 下载证书,访问后自动进入下载
在小米系统中，证书不能通过直接点击文件的方式进行安装，我们需要在设置中搜索“证书“，进入CA证书中：
搜索charles，点击文件进行安装：
3.4 可能出现的问题及解决方案
- 手机端证书安装不了： 尝试把证书文件扩展名从.pem改为.cer
- 仍然抓不了包： 关闭电脑防火墙
4. 抓包实战
4.1 基本使用
4.1.1 charles常用功能
4.1.1.1 快捷工具
在抓包工作中，我们主要需要的按钮是这两个，类似浏览器开发工具中的:
4.1.1.2 面板字段：
- charles提供两种查看封包的视图，分别为“structure” 和“sequence”
- structure 是指按网络请求访问的域名分类
- sequence则是将网络请求按访问的时间顺序排序
- Filters： 关键字筛选，可以输入关键字来快速筛选出URL中带有指定关键字的网络请求
和浏览器中类似，我们可以按 ctrl+f 搜索返回的字段，
- 修改网络请求内容 选择“Compose”,可以创建一个可编辑的网络请求。
- 慢速模拟网络
在charles的菜单上，选择“Proxy”->“Throttle Setting”项，在之后弹出的对话框中，我们可以勾选上“Enable Throttling”()
我们还可以只模拟指定网站的慢速网络，可以勾选上“Only for selected hosts”，再增加指定的hosts即可。
4.2 示例
我们以报警模块的解除报警为例，现在尝试抓包并分析它的请求。
- 首先我们尝试触发请求，点击app端的解除报警。
- 跳转到了解除报警的页面，此时我们观察charles面板：
在概述中，我们可以看到是请求了/loong/api/alarm-records/detail/67363 接口，这是一个get请求。
在contents中我们可以看到这个接口返回的字段，不难看出id正是67163，通过分析返回的信息，我们可以提取相应的字段，遇到不明确的信息或者逻辑，可以在这时询问后端人员。
- 点击确认报警，查看抓取到的网包。
可以看到，发出了PUT请求，接口地址是/loong/api/alarm-records/confirm,需要传递的对象有三个属性：报警id的数组，报警解除方式和备注。
我们可以根据我们获取到的信息，定义数据，并写出响应的请求代码：
5. 小技巧
- 取消勾选框住的选项1，勾选选项2，只抓取手机包
- 在公司时，只有插网线使用以太网才能抓包（运维出于安全考虑做了限制）
6. 总结
在这篇文档中，我较为详细的介绍了Charles的安装和配置步骤，以及简单介绍了如何使用它的各项功能进行网络调试和分析。希望大家可以帮助各位更快速地了解它并上手使用。