软件测试之Charles

一.Charles简介

它是一款基于http协议的代理服务器，通过成为电脑或者浏览器的代理，然后截取请求和请求结果达到分析抓包的目的。Charles中文名字青花瓷，是一款Http代理服务器和Http监视器，当移动端在无线网连接中按要求设置好代理服务器，使所有对网络的请求都经过Charles客户端来转发时，Charles可以监控这个客户端各个程序所有连接互联网的Http通信。

工作原理：
1.需要运行Charles并配置代理(前提)
2.在客户端上面需要配置代理(前提)
3.由客户端发送请求
4.Charles接收再发送给服务端
5.服务端返回请求结果给Charles
6.由Charles转发给客户端

特点：跨平台，半免费【使用30分钟之后会强制退出】

优点：(对比Fiddler的优点)
Charles能够支持Linux、macOS，Fiddler只支持Windows；
Charles支持按域名和按接口查看报文，简洁明了；
Charles支持反向代理；
Charles网络限速可选择网络类型；
Charles可以解析AMF协议

主要功能：

截取 Http 和 Https 网络封包。
支持重发网络请求，方便后端调试。
支持修改网络请求参数。
支持网络请求的截获并动态修改。
支持模拟慢速网络。

二.Charles安装与配置

(3)Charles设置

①代理设置(在Charles的菜单上选择 Proxy->Proxy Settings，填入代理端口8888，并且勾选上"Suport HTTP/2"和"Enable transparent HTTP proxying"，并点击ok就完成了在Charles 上的设置了。)

②访问控制

③证书安装-https

a.在mac上配置Charles证书，具体位置在Charles菜单栏中的Help->SSL Proxying->Install Charles Root Certificate

如果证书不受信任，请更改为完全信任

b.在Charles 需要抓取的URL地址（Proxy->SSL Proxying Settings）

三、移动端抓包

（1）抓包配置：这里的抓包教程以iPhone为例子，安卓操作步骤与iPhone一致。首先需要将 Charles 的代理功能打开。在 Charles 的菜单栏上选择 “Proxy”->”Proxy Settings”，填入代理端口 8888，并且勾上 “Enable transparent HTTP proxying” 就完成了在 Charles 上的设置。如下图所示:

获取 Charles 运行所在电脑的 IP 地址，Charles 的顶部菜单的 “Help”->”Local IP Address”，即可在弹出的对话框中看到 IP 地址，如下图所示：

在 iPhone 的 “ 设置 “->” 无线局域网 “ 中，可以看到当前连接的 WIFI 名，通过点击右边的详情键，可以看到当前连接上的 WIFI的详细信息，包括 IP 地址，子网掩码等信息。在其最底部有「HTTP 代理」一项，我们将其切换成「手动」，然后填上 Charles 运行所在的电脑的 IP（见上张图片），以及端口号 8888

设置好之后，我们打开 iPhone 上的任意需要网络通讯的程序（如手机上百度APP），就可以看到 Charles 弹出 iPhone 请求连接的确认菜单（如下图所示），点击 “Allow” 即可完成设置。现在就可以进行HTTP抓包了，如果还想再进行HTTPS抓包，需要安装和信任对应的证书、

（2）移动端安装证书

点击 Charles 的顶部菜单，选择 “Help” -> “SSL Proxying” -> “Install Charles Root Certificate on a Mobile Device or Remote Browser”

弹出提示框，上面有代理的IP与端口，以及下载证书的地址

下载证书：点击确认后Charles会出现连接是否允许的选项，点击allow，然后就可以在手机浏览器输入chls.pro/ssl下载证书
安装与信任证书：
安卓手机（华为）安装证书的方式
【设置-安全-更多安全设置-加密和凭据-从存储设备安装-证书的路径】
注意：证书用途一定要选择VPN和应用，不然华为手机无法信任用户安装的证书

IOS信任证书的方式【设置-通用-关于本机-证书信任设置】

四、Charles常用功能

1.重复请求-Repeat

在测试过程中，有时候需要对服务器重复相同发送请求，用于定位服务器问题或者压力测试，在请求上双击右键菜单，点击Repeat按钮就可以重复发送请求

点击Repeat Advanced… ，还可以设置重复发送的次数，是否多线程发送，以及每次发送的时间间隔

2.弱网测试

在做软件测试的时候，我们常常需要模拟慢速网络或者高延迟的网络，以测试在弱网下，APP的各个功能是否正常使用，以及是否有对应的网络提示

在 Charles 的菜单上，选择 “Proxy”->”Throttle Setting” 项，在之后弹出的对话框中，我们可以勾选上 “Enable Throttling”，并且可以设置 Throttle Preset 的类型，可以模拟3G或者其他指定kbps 的网络，设置下载和上传的速率。如下图所示：

关于网速的选择

Bandwidth（带宽）、Utilistation（利用百分比）、Round-trip（往返延迟）、MTU（最大传输单元）

3G：300k-2Mbps左右

2.5G(GPRS)一般在100kbps

2G（GSM）一般在5-9kbps

弱网、2G、3G建议的上下行速率如下，同时还可以控制丢包率的数据
网络上行下行
弱网 10 30
2G 15 50
3G 384 2800
测试总结：

1.一般弱网应该支持到默认56kb的选择，然后在设置如下时，会体现出弱网，此时对于文字时可以支持加载，但是图片一般亦可以

2.测试本地缓存文件时，设置全局限制会比较好，这样一般不会影响本地读取的速度，如果读取不出文字或者图片，可能是素材并没有做到本地缓存导致的

3.修改请求与响应

在测试时，我们时常会重定向请求的地址，以及修改请求或者响应的内容。Charles提供了MAP、Rewrite、Breakpoints三大功能来实现

Map 功能适合长期地将某一些请求重定向到另一个网络地址或本地文件
Rewrite 功能适合对网络请求进行一些正则替换
Breakpoints 功能适合做一些临时性的修改

（1）MAP功能-重定向

将某个请求进行重定向，用重定向的内容响应请求的内容，分为两种：map local和map remote

map local：将某个网络请求重定向到本地某个文件

map remote：将某个网络请求重定向到另一个网络请求

在 Charles 的菜单中，选择 “Tools”->”Map Remote” 或 “Map Local” 即可进入到相应功能的设置页面

对于 Map Remote 功能，分别填写网络重定向的源地址和目的地址，对于不需要限制的条件，可以留空。下图是一个示例，我将所有 baidu.baidu.com（线上地址）的请求重定向到了 11.102.135.33:8505（线下测试地址）

对于 Map Local 功能，我们需要填写的重定向的源地址和本地的目标文件。对于有一些复杂的网络请求结果，我们可以先使用 Charles 提供的 “Save Response…” 功能，将请求结果保存到本地（如下图所示），然后稍加修改（比如修改某个返回字段的数据），成为我们的目标映射文件

将一个指定的网络请求通过 Map Local 功能映射到了本地的一个经过修改的文件中，图中的Map From就是源请求地址，而Map To 就是本地的返回结果文件

Map Local 在使用的时候，有一个潜在的问题，就是其返回的 HTTP Response Header 与正常的请求并不一样。这个时候如果客户端校验了 HTTP Response Header 中的部分内容，就会使得该功能失效。解决办法是同时使用 Map Local 以下面提到的 Rewrite 功能，将相关的 HTTP 头 Rewrite 成我们希望的内容

在测试时，我们通常有线上和线下两套环境，而我们的APP直接打开是请求的线上环境，这时候就需要通过Charles的Map Remote功能，实现重定向请求到线下环境进行测试。也可以使用Map Local 来修改响应结果

举例：

map local

（1）情景：一个项目上线后，发现js或者css bug了，怎样调试？线上项目的静态文件无法直接编辑，有何方法在不改变其他参数的情况下直接用本地的开发文件替换线上的文件从而方便调试？

（2）可选方案：map local功能

（3）步骤

Tools→map local
勾选Enable Map Local
点击add 按钮
添加你要调试的文件 map from:要调试的线上文件 map to:本地文件
保存配置信息
2、map remote

（1）情景：进行一个需求开发，测试环境是：lvxing.st.meituan.com，测试完成，前端开发者上线了，现在QA需要跟踪线上情况，如何切到线上环境？

（2）可选方案：map remote功能

（2）步骤

Tools→map remote
勾选add按钮
填写配置信息
remote from:测试环境 remote to:线上环境

3、补充map隐射的匹配功能

*: 可以匹配0个或者多个字符
?: 可以匹配一个字符
[...]: 范围选择符，可以匹配范围中的任意一个字符

举例：匹配127.0.0.1:8080/api/下所有文件以及子路径，将所有都重定向到cmstest.intra.xiaojukeji.com/api/下

（2）Rewrite-重写

1.打开charles，点击菜单栏的Tools选中Rewrite

2.出现如下界面，选择Enable Rewrite，点击Add，此时会出现一个Unitled Set（3处可自定义名称）

3.点击Location下方的Add，出现二级界面

选择自己需要的Protocol(http/https)
放入需要访问的接口地址api（填写完，Path和Query会自动生成）
Port和Query改为*（也可自定义）
Path不动

4.点击下面的Add，填写重写规则

Type: 重写的类型，可以选择url/body等

Where: 在哪里修改Request中还是Response中
        Match：
                Value：寻找匹配内容中与value一致的值（支持正则匹配）
        Replace：
                Value：替代Match的Value里的值
                        Replace first：仅替代掉第一个被匹配的值
                        Replace all：替代到所有被匹配的值

注意：Rewrite还可以和Map Remote配合使用。即先重定向地址，然后修改请求头或返回结果等，注意如果需要在Map Remote勾选Preserve host in header fields，不然Rewrite无法命中

（3）Breakpoints

上面提供的 Rewrite 功能最适合做批量和长期的替换，如果只是想临时替换一次，可以 Breakpoints 功能。

Breakpoints 功能类似我们在 Xcode 中设置的断点一样，当指定的网络请求发生时，Charles 会截获该请求。勾选Breakpoints后，可以点击repeat，打开断点调试面板后，点击add 临时修改网络请求的请求/返回内容，然后点击Execute执行即可

4.Compose编辑请求

有时候为了调试服务器的接口，需要反复尝试不同参数的网络请求。Charles 提供了网络请求的修改和重发功能。
只需要在以往的网络请求上右击选择“Compose”，即可创建一个可编辑的网络请求。我们可以修改该请求的任何信息，包括 URL 地址、端口、参数等，之后点击 “Execute” 即可发送该修改后的网络请求。
Charles 支持我们多次修改和发送该请求，这对于我们和服务器端调试接口非常方便。

5.反向代理

Charles 的反向代理功能允许我们将本地的端口映射到远程的另一个端口上。例如，在下图中，我将本机的 8001 端口映射到了远程（www.baidu.com）的443端口上了。这样，当我访问本地的 8001 端口时，实际返回的内容会由 www.baidu.com 的 443 端口提供