简介
Charles 是在 Mac （Charles是跨平台的 ）下常用的网络封包截取工具，在做移动开发、测试时，我们为了调试与服务器端的网络通讯协议，常常需要截取网络封包来分析。
Charles 通过将自己设置成系统的网络访问代理服务器，使得所有的网络访问请求都通过它来完成，从而实现了网络封包的截取和分析。
除了在做移动开发中调试端口外，Charles 也可以用于分析第三方应用的通讯协议。配合 Charles 的 SSL 功能，Charles 还可以分析 Https 协议。
Charles 主界面介绍
Charles 主要提供两种查看封包的视图，分别名为 “Structure”结构 和 “Sequence”序列。
大家可以根据具体的需要在这两种视图之前来回切换。请求多了有些时候会看不过来，Charles 提供了一个简单的 Filter（过滤器） 功能，可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求。
对于某一个具体的网络请求，你可以查看其详细的请求内容和响应内容。如果请求内容是 POST 的表单，Charles 会自动帮你将表单进行分项显示。如果响应内容是 JSON 格式的，那么 Charles 可以自动帮你将 JSON 内容格式化，方便你查看。如果响应内容是图片，那么 Charles 可以显示出图片的预览。
Charles 主要的功能
将 Charles 设置成系统代理
Charles 是通过将自己设置成代理服务器来完成封包截取的，所以使用 Charles 的第一步是将其设置成系统的代理服务器。
启动 Charles 后，第一次 Charles 会请求你给它设置系统代理的权限。你可以输入登录密码授予 Charles 该权限。你也可以忽略该请求，然后在需要将 Charles 设置成系统代理时，选择菜单中的 “Proxy”来将 Charles 设置成系统代理。如下所示：
之后，你就可以看到源源不断的网络请求出现在 Charles 的界面中。
需要注意的是，Chrome 和 Firefox 浏览器默认并不使用系统的代理服务器设置，而 Charles 是通过将自己设置成代理服务器来完成封包截取的，所以在默认情况下无法截取 Chrome 和 Firefox 浏览器的网络通讯内容。如果你需要截取的话，在 Chrome 中设置成使用系统的代理服务器设置即可，或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。
过滤网络请求
通常情况下，我们需要对网络请求进行过滤，只监控向指定目录服务器上发送的请求。对于这种需求，以下几种办法：
方法一：在主界面的中部的 Filter 栏中填入需要过滤出来的关键字。例如我们的服务器的地址是：http://baidu.com , 那么只需要在 Filter 栏中填入 baidu 即可。
过滤后如下：
方法二：在 Charles 的菜单栏选择 “Proxy”–>“Recording Settings”，然后选择 Include 栏，选择添加一个项目，然后填入需要监控的协议，主机地址，端口号。这样就可以只截取目标网站的封包了。如下图所示：
通常情况下，我们使用方法一做一些临时性的封包过滤，使用方法二做一些经常性的封包过滤。
方法三：在想过滤的网络请求上右击，选择 “Focus”，之后在 Filter 一栏勾选上 Focussed 一项，如下图所示：
截取 iPhone 手机上的网络封包
Charles 通常用来截取本地上的网络封包，但是当我们需要时，我们也可以用来截取其它设备上的网络请求。
确保抓包电脑和手机在同一网络中，不然是抓取不到网络包。
Charles 上的设置
要截取 iPhone 上的网络请求，我们首先需要将 Charles 的代理功能打开。
在 Charles 的菜单栏上选择 “Proxy”–>“Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的设置。
如下图所示:
iPhone 上的设置
我们需要获取 Charles 运行所在电脑的 IP 地址，Charles 的顶部菜单的 “Help”–>“Local IP Address”，即可在弹出的对话框中看到 IP 地址，如下图所示：
在 iPhone 的 “ 设置 ”–>“ 无线局域网 ” 中，可以看到当前连接的 wifi 名，通过点击右边的详情键，可以看到当前连接上的 wifi 的详细信息，包括 IP 地址，子网掩码等信息。在其最底部有「HTTP 代理」一项，我们将其切换成手动，然后填上 Charles 运行所在的电脑的 IP，以及端口号 8888，如下图所示：
设置好之后，我们打开 iPhone 上的任意需要网络通讯的程序，就可以看到 Charles 弹出 iPhone 请求连接的确认菜单（如下图所示），点击 “Allow” 即可完成设置。
截取 Https 通讯信息
安装证书
- 如果你需要截取分析 Https 协议相关的内容。那么需要安装 Charles 的 CA 证书。
- 出现弹窗得到地址 http://charlesproxy.com/getssl
- 在手机浏览器输入http://charlesproxy.com/getssl地址，出现安装证书页面，点击安装
注意：IOS 10以上系统，需要在 设置->通用->关于本机->证书信任设置里启用完全信任的Charels证书
Charels 设置 Proxy
Proxy -> SSL Proxying Settings...勾选Enable SSL Proxying，点击Add
Host设置要抓取的https接口，比如想抓：https://www.baidu.com/（当Host为 *，默认抓取全部https请求 ）
注意： 不抓包时请关闭手机HTTP代理，否则断开与电脑连接后会造成无法上网的情况
然后抓包即可
模拟慢速网络
在做移动开发的时候，我们常常需要模拟慢速网络或者高延迟的网络，以测试在移动网络下，应用的表现是否正常。Charles 对此需求提供了很好的支持。
在 Charles 的菜单上，选择 “Proxy”–>“Throttle Setting” 项，在之后弹出的对话框中，我们可以勾选上 “Enable Throttling”（节流调节），并且可以设置 Throttle Preset 的类型。如下图所示：
如果我们只想模拟指定网站的慢速网络，可以再勾选上图中的 “Only for selected hosts” 项，然后在对话框的下半部分设置中增加指定的 hosts 项即可。
修改网络请求内容
有些时候为了调试服务器的接口，我们需要反复尝试不同参数的网络请求。Charles 可以方便地提供网络请求的修改和重发功能。只需要在以往的网络请求上点击右键，选择 “Compose”，即可创建一个可编辑的网络请求。如下所示：
PS:现在看到Compose功能并不会把原来请求的参数带出来，需要自己添加参数，觉得不是很方便，直接带出原来的参数给修改会更方便一些。
给服务器做压力测试
我们可以使用 Charles 的 Repeat 功能来简单地测试服务器的并发处理能力，方法如下。
我们在想打压的网络请求上（POST 或 GET 请求均可）右击，然后选择 「Repeat Advanced」菜单项，如下所示：
接着我们就可以在弹出的对话框中，选择打压的并发线程数以及打压次数，确定之后，即可开始打压。
PS：悄悄说一句，一些写得很弱的投票网站，也可以用这个办法来快速投票。当然，我也拿 Charles 的 Repeat 功能给一些诈骗的钓鱼网站喂了不少垃圾数据，上次不小心还把一个钓鱼网站的数据库打挂了，嗯，请叫我雷锋。
修改服务器返回内容
有些时候我们想让服务器返回一些指定的内容，方便我们调试一些特殊情况。例如列表页面为空的情况，数据异常的情况，部分耗时的网络请求超时的情况等。如果没有 Charles，要服务器配合构造相应的数据显得会比较麻烦。这个时候，使用 Charles 相关的功能就可以满足我们的需求。
根据具体的需求，Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能，都可以达到修改服务器返回内容的目的。这三者在功能上的差异是：
Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
Rewrite 功能适合对网络请求进行一些正则替换。
Breakpoints 功能适合做一些临时性的修改。
Map 功能
Charles 的 Map 功能分 Map Remote 和 Map Local 两种，顾名思义，Map Remote 是将指定的网络请求重定向到另一个网址请求地址，Map Local 是将指定的网络请求重定向到本地文件。
在 Charles 的菜单中，选择 “Tools”–>“Map Remote” 或 “Map Local” 即可进入到相应功能的设置页面。
对于 Map Remote 功能，我们需要分别填写网络重定向的源地址和目的地址，对于不需要限制的条件，可以留空。下图是一个示例，我将所有ytk1.yuanku.ws（测试服务器）的请求重定向到了 www.yuantiku.com（线上服务器）。
对于 Map Local 功能，我们需要填写的重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果，我们可以先使用 Charles 提供的 “Save Response…” 功能，将请求结果保存到本地（如下图所示），然后稍加修改，成为我们的目标映射文件。
Rewrite 功能
Rewrite功能适合对某一类网络请求进行一些正则替换，以达到修改结果的目的。
可以重写接口所有元素的内容：header、host、url、path、query param、response status、body。
具体操作如下：
1.点击Charles菜单栏Tools中的Rewrite，
2.弹出Rewrite Settings框，勾选左上角的Enable Rewrite选项，并点击Add，左侧边框出现Untitled Set，在右侧的Name栏可以对此次的Rewrite进行重命名。
3.在右侧Location栏点击Add，在弹出的Edit Location对话框中，填入相关参数，最后点击OK
4.接着，在右侧Rules栏点击Add，在弹出的Rewrite Rule对话框中，填入相关参数，最后点击OK
一、修改接口返回报文参数
作用：对请求的响应内容做修改，一般是对某一个或几个值进行rewrite，用新的值来替代返回的值。
使用场景：可以用来mock数据，比方说在开发中为了测试功能需要请求的某个数组字段有值，但是当前环境无法给出，那么就可以使用该功能。
会将返回数据中的2018-08-05全部替换成2018-08-03。
二、修改请求的header
作用：可以对请求或者响应的header内容进行操作，包括添加、修改及删除。
使用场景：在需要对header进行处理时用到，例如为了用上某个环境数据，可能需要对应userid，这时本地开发是可以在请求的header中加上userid信息；也可以重写响应header的信息。
会在请求的header中添加userid属性。
注：Match栏的name和value值如果不填会匹配所有的请求，如果有值，则去匹配有改键值的请求。
三、修改path
主要rewrite path内容使用指定rewrite规则的path来响应指定的请求path，它可以对path进行裁剪。
请求的结果如下：
四、其他
- host: 主要是对请求进行host修改，以达到本地请求获取指定host环境中的数据，常见于mock数据
- url: 作用：修改url中某些部分，可以用别的url进行替换或者url裁剪时间戳或者md5等
使用场景：场景使用非常多，既可以对host也可以对path进行rewrite，可以满足指定host下的请求重定向到其他host下对应path下 - query param:作用：可以对param进行操作，包括修改、添加、删除等
使用场景：有时请求可能多传递了不必要的参数，这时可以rewirte功能去掉多余的参数；另外也可以添加请求必须而暂时无法提供的参数 - response status: 很少用到，顾名思义就是对response的状态码进行rewrite
Breakpoints 功能
测试过程中经常需要测试不同的界面显示，比如名字太长、特殊符号显示，一方面可以通过修改源数据实现，比如数据库中修改电影名，但是这样的话首先比较麻烦，需要进行数据库操作；其次，修改完之后会影响其他人的工作。比较轻便的做法，则是通过charles修改服务器返回值实现。
假设有这样一个测试需求：测试豆瓣电影名显示。我们使用 charles 来操作一下。
1、打开 charles，勾选 macOS Proxy，网页请求 https://movie.douban.com/
如果是 https 的请求，需要先配置 https 证书。
页面显示如下：
2、找到热门电影的接口，单击右键选中 “Breakpoints”
3、再次请求该页面，该页面刷新后，热门电影区域显示空白，charles 首先弹出“请求”选择框，有 “Cancel”、“Abort”、“Execute” 三个选择，选择 “Execute”，让 charles 通过这次请求。
Cancel 表示取消，Abort 表示中止，Execute 表示执行
4、接下来会触发 “响应” 选择框，点击 “Edit Response”，修改返回值，点击 “Execute”。
显示效果：
Breakpoints 能够应用在 qa 环节的场景其实有很多，例如：
在请求之前，修改参数，获取不同参数下的返回值，验证服务端逻辑
修改返回值的内容，包括长度，数据格式等，用于校验前端在一些边界情况下的展示
修改响应头，测试不同响应条件下，前端的展示情况（例如服务端报错500）
etc...
Charles功能总结
- 截取 Http 和 Https 网络封包。
- 支持重发网络请求，方便后端调试。
- 支持修改网络请求参数。
- 支持网络请求的截获并动态修改。
- 支持模拟慢速网络。
- Structure 视图将网络请求按访问的域名分类。
- Sequence 视图将网络请求按访问的时间排序。
- Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件。
- Rewrite 功能适合对网络请求进行一些正则替换。
- Breakpoints 功能适合做一些临时性的修改。
参考资料：
https://www.cnblogs.com/mawenqiangios/p/8270238.html
https://zhuanlan.zhihu.com/p/92161068
https://blog.csdn.net/qq_33340749/article/details/80612480
https://blog.csdn.net/forebe/article/details/98945139
https://www.jianshu.com/p/82f48d5beee5