编码前准备——Charles的使用

蔚落 2023-09-30 11:34 15阅读 0赞

调试或者线上出现问题时，有时需要复现请求排查问题，而业务日志的信息可能并不全面，尤其是需要cookies信息，charles就是常用的抓包工具，能拿到完整的HTTP请求。或是一个动作触发的一系列请求。

在开发阶段，域名没有跟环境绑定时，或者客户端的请求域名是写在客户端代码中时，就需要将请求的域名转发到对应环境的机器或NGINX的IP上，就会用到charles的Map Remote转发功能。

此外，charles还可以模拟慢相应、断点模式等额外的功能。

**1.Charles的作用**

（1）拦截请求——抓包，可以抓手机/Windows端的HTTP请求，查看内容；  
（2）转发——拦截请求后，可以将请求转发到其他地址，可以手机调试本机启动的工程而不需要改客户端代码；

**其他功能：**

1.  支持SSL代理。可以截取分析SSL的请求。
2.  支持流量控制。可以模拟慢速网络以及等待时间（latency）较长的请求。
3.  支持AJAX调试。可以自动将json或xml数据格式化，方便查看。
4.  支持修改网络请求参数。
5.  支持网络请求的截获并动态修改。
6.  检查HTML，CSS和RSS内容是否符合W3C标准。

**2.安装**

去Charles的官方网站（[http://www.charlesproxy.com][http_www.charlesproxy.com]）下载最新版的相应操作系统的Charles安装包安装即可。

**3.使用方法**

（1）将Charles设置成系统代理

![a967f0832163168f7664b5c1161af479.png][]

（2）截取移动设备（手机）上的网络请求包（HTTPS）

开启Charles http代理：工具栏选择Proxy -> Proxy Settings，并且勾选Enable transparent Http proxying，端口号填写5000，如图：

![99b717565034923af10ccfc3e70eae30.png][]

手机端Wifi添加代理：在手机端打开你的Wifi设置然后长按已经连接的Wifi(一般是vivo-free)，继续点击进入设置页面，勾上\[手动代理\]选项，代理服务器主机名填写电脑IP，端口号填写5000。当手机连接上代理后Charles会弹出相应的提示框：

![9e0c449ebd4b22da53b646bcf33b49af.png][]

点击Allow即可。

完成上述配置即可以对手机端发送的HTTP请求进行抓包。但由于Chrles属于代理服务器缺少SSL证书，**无法对HTTPS请求进行抓包，需进行如下配置**：

开启Charles https代理：工具栏的选择Proxy -> SSL Proxying Settings 然后点击Add Host填写\*，Port填写443 并且勾选上Enable SSL Proxying 如图：

![9fa9bbdada86cd787b6e71cd7e38f5f3.png][]

下载证书：点击 Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile Device出现弹窗：

![8a3249256c6f791f8a737a8546e53dd4.png][]

在手机浏览器输入地址 chls.pro/ssl，出现证书下载页面，下载并安装。如下载后无法正常安装证书，请根据具体手机型号自行查找证书安装方法。

**Charles抓取HTTPS报文原理**

HTTPS通信的大致过程：

*  1.客户端将自己支持的加密算法发送给服务器，请求服务器证书；
 *  2.服务器选取一组加密算法，并将证书返回给客户端；
 *  3.客户端校验证书合法性，生成随机对称密钥，用公钥加密后发送给服务器；
 *  4.服务器用私钥解密出对称密钥，返回一个响应，HTTPS连接建立完成；
 *  5.随后双方通过这个对称密钥进行安全的数据通信。

Charles作为一个中间人代理，当浏览器和服务器通信时，Charles接收服务器的证书，但动态生成一张证书发送给浏览器，也就是说Charles作为中间代理在浏览器和服务器之间通信，所以通信的数据可以被Charles拦截并解密。由于Charles更改了证书，浏览器校验不通过会给出安全警告，必须安装Charles的证书后才能进行正常访问。

**转发手机请求到本机来调试：**

实际开发时，有这样的场景，服务端线上版本有bug，你在本地修改程序后，需要模拟实际的线上环境，来验证程序的正确性，最直接的方法就是让客户端修改一下APP的调用地址到你本机，然后重新打一个版本供你模拟测试，这样虽然可以，但效率极其低下，然而Charles为我们解决了这个问题。请求转发，即把调用方调用的地址转发到你本机地址的程序进行执行。

操作：工具栏->Tools-Map Remote。

一个配置例子如下图，把手机app的clientRequest相关的请求接口从走外网的后台改为走本地的后台服务，注意\*号通配符。

![99a6fe54c1108efeeb588ee6abf4e49c.png][]

![ccc3e36738f5d929cd661637bdb513cc.png][]

**4.其他使用技巧**

*  **显示模式**

Charles有两种显示模式，Stucture 和Sequence。支持来回切换。

Structure形式如下图 优点：可以很清晰的看到请求的数据结构，而且是以域名划分请求信息的，可以很清晰的去分析和处理数据。

![1be0a1ef36ebbd54d1e88f7b62cd6773.png][]

Sequence形式如下图 优点：可以看到全部请求，这里的结果以数据请求的顺序来显示，最新的请求显示在最下面。

![563c966c962ae3f463be5f40aef60f27.png][]

structure 适合对单一系列的访问请求从宏观上进行把握，可以快速定位。sequence 适合精确定位内容，因为每条sequence 都有size，status等属性信息，方便快速定位这条结果的价值。

*  **过滤抓取请求**

通常情况下，网络请求是非常大量的，从几十个请求里找到我们需要的观察的某个请求比较费时，那么我们就需要对网络请求进行过滤，只监控向指定目录服务器上发送的请求。有两种方法：

（1）在Sequence界面的中部的Filter栏中填入需要过滤出来的关键字。例如我们的服务器的地址是：\*.vivo.com.cn，那么只需要在Filter栏中填入leautolink即可。（一般用于临时过滤）

（2）开始抓包后，随着时间的推移，抓取到的网络包越来越多，这时我们可以使用过滤功能，来过滤出我们想要的网络请求。在Proxy -> Recording Settings 中可以设置网络包的过滤选项。

![dc9ed9777fce28a632a3dbd083fe4653.png][]

过滤选项中有Include 和 Exclude 两种选项。只有当 Include 为空时，Exclude 中的设置才会生效。过滤条件支持通配符。

*  **模拟慢速网络**

在做移动端开发的时候，我们常常需要模拟慢速网络或者高延迟的网络，以测试在移动网络下，应用的表现是否正常。Charles对此需求提供了很好的支持。

在Charles的菜单上，选择Proxy->Throttle Setting项，在之后弹出的对话框中，我们可以勾选上“Enable Throttling”，并且可以设置Throttle Preset的类型。

*  **通过断点修改请求与响应的内容**

除了修改映射的方法，通过设置断点也可以实现想要的效果。和我们在IDE上设置断点一样，在断点处会进入调试模式，请求会暂时中断，这是我们可以进行一些自定义的操作。

*  **设置Charless断点**

选择Proxy->Breakpoint Settings…->勾选Enable Breakpoints来激活断点功能。

*  **对指定的URL开启断点功能**

选择一个URL链接->右键开启菜单->选择Breakpoints即可开启此请求的断点。这样Charles会遇到此请求时会弹出中断对话框

*  **编辑请求与响应的内容**

在中断对话框中，用户可以点击Edit Request来编辑请求的内容，编辑完成后然后点击Execute发出去这个请求给服务端。

在Edit Request对话中点击Execute发出请求后，服务端返回来数据后，用户点击Edit Response可对响应内容进行编辑完成后然后点击Execute发出去这个数据给客户端。

需要注意一点：通过断点的方式会存在一定的问题。数据被拦截后，客户端的请求超时时长是不会停止计算的，如果没在设置的超时时间内返回数据本次请求也就按失败处理了。

参考：[charles使用大全 - 简书![icon-default.png?t=M276][icon-default.png_t_M276]https://www.jianshu.com/p/d0a5e6986445][charles_ - _icon-default.png_t_M276_icon-default.png_t_M276_https_www.jianshu.com_p_d0a5e6986445]

[http_www.charlesproxy.com]: http://www.charlesproxy.com/
[a967f0832163168f7664b5c1161af479.png]: https://img-blog.csdnimg.cn/img_convert/a967f0832163168f7664b5c1161af479.png
[99b717565034923af10ccfc3e70eae30.png]: https://img-blog.csdnimg.cn/img_convert/99b717565034923af10ccfc3e70eae30.png
[9e0c449ebd4b22da53b646bcf33b49af.png]: https://img-blog.csdnimg.cn/img_convert/9e0c449ebd4b22da53b646bcf33b49af.png
[9fa9bbdada86cd787b6e71cd7e38f5f3.png]: https://img-blog.csdnimg.cn/img_convert/9fa9bbdada86cd787b6e71cd7e38f5f3.png
[8a3249256c6f791f8a737a8546e53dd4.png]: https://img-blog.csdnimg.cn/img_convert/8a3249256c6f791f8a737a8546e53dd4.png
[99a6fe54c1108efeeb588ee6abf4e49c.png]: https://img-blog.csdnimg.cn/img_convert/99a6fe54c1108efeeb588ee6abf4e49c.png
[ccc3e36738f5d929cd661637bdb513cc.png]: https://img-blog.csdnimg.cn/img_convert/ccc3e36738f5d929cd661637bdb513cc.png
[1be0a1ef36ebbd54d1e88f7b62cd6773.png]: https://img-blog.csdnimg.cn/img_convert/1be0a1ef36ebbd54d1e88f7b62cd6773.png
[563c966c962ae3f463be5f40aef60f27.png]: https://img-blog.csdnimg.cn/img_convert/563c966c962ae3f463be5f40aef60f27.png
[dc9ed9777fce28a632a3dbd083fe4653.png]: https://img-blog.csdnimg.cn/img_convert/dc9ed9777fce28a632a3dbd083fe4653.png
[icon-default.png_t_M276]: https://csdnimg.cn/release/blog_editor_html/release2.0.8/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M276
[charles_ - _icon-default.png_t_M276_icon-default.png_t_M276_https_www.jianshu.com_p_d0a5e6986445]: https://www.jianshu.com/p/d0a5e6986445