Charles是一款可以代理调试的工具，适用于Mac，Windows系统设备可以使用Fiddler。使用Charles工具可以更方便地调试请求：

1.可获取手机上的请求
2.可模拟慢速
3.可修改网络请求内容
4.可修改服务器返回的内容

接下来，我将从以上几个方面去总结Charles的使用。

设置系统代理

将Charles设置为系统代理才可以监控请求，所以使用Charles的第一步是设置为系统代理，步骤如下：

1.选择左上角“Proxy -> macOS Proxy”，开启macOS Proxy。

2.在“系统偏好设置 -> 网络 -> 高级 -> 代理”，选择如下：

注意：自动代理配置选项不能选中哦，否则检测不到请求

操作完之后就可以在Charles主页看到请求。

获取手机上的请求

有时想要手机设备上进行一些操作，需要调试查看服务器返回的数据，Charles在此提供了大大的便利。

1.打开Charles的代理功能

(1) 选择左上角“Proxy -> Proxy settings”

(2) 勾选“Enable transparent HTTP proxing”,Port端口填8888

(3) 设置SSL Proxying
选择“Proxy -> SSL Proxing Settings -> add”

2.抓https请求，需安装Charles根证书

(1)选择左上角“help -> SSL Proxing -> Install Charles Root Certificate”

(2) 点击添加

(3) 在钥匙串访问中找到Charles Proxy CA，选中双击

(4) 点击信任，展示内容，选择始终信任

安装完成。

3.手机设置代理

(1) 首先需要找到电脑的IP地址，在“系统偏好设置 -> 网络”可以查看得到IP地址。

(2) 在手机“设置 -> Wi-Fi”找到跟电脑相同域的wifi，点击该wifi进入wifi详情页，点击Configure Proxy

(3) 在Configure Proxy中，在Server填入电脑的IP地址，Port为Charles设置的代理端口。

(4) 此时Charles弹出手机连接信号，选择Alloy。

(5) 在手机浏览器上访问地址：http://chls.pro/ssl，打开安装证书页面，点击Allow。

(6) 安装证书。

(7) 完成安装

(8) 证书任性设置

在“设置 -> 通用 -> 证书信任设置”里勾选安装的证书：

手机浏览页面，即可在Charles看到请求。

模拟慢速环境

有时项目需要在慢速情况下进行对应的操作，那么可以通过Charles的Throttle设置模拟慢速环境。

1.在左上角选择“Proxy -> Throttle settings”

2.选中Enable Throttling，在下面的配置中填入需要的参数，选择ok

3.手机重新刷新页面，会发现网络速度降低了，完成配置。

修改网络请求内容

有时为了测试服务器接口的不同参数情况下的请求，那么可以通过Charles修改接口的请求并重新请求。

在需要修改的请求上右击，选择“Compose”，即可进入该请求的编辑页。可以修改该请求的请求方式、请求地址、协议等，修改完成后点击“Execute”执行，返回结果。

修改服务器返回的内容

在项目中，较常使用Map Local来修改服务器返回的内容，Map Local可以将网络请求重定向到本地文件，主要用途如下：

1.直接修改某个接口返回的内容，比如可以模拟接口异常。
2.将线上html、css、js等文件重定向到本地进行调试。

直接选择接口或文件右击，选择Map Local，打开Edit Mapping页，在Local path选中需要模拟接口异常的json文件或需要重定向的静态文件，点击ok即可，重新刷新页面。

模拟网络延迟

项目中，可能有这样的需求，比如网络延迟10s要弹出网络延迟的toast，那么Charles可以使用Breakpoints模拟网络延迟的环境来测试页面。

Breakpoints类似断点，可以在某网络请求时，截断该请求，可修改请求的内容，在截断过程中，请求还在进行，当请求超过10s时，达到前端设置的10s延迟时间，导致页面请求超时，即可模拟网络延迟。

总结

Charles的功能强大，在我们开发和测试阶段提供很大的帮忙，我会继续挖掘哒！！