新手必看：用Charles“偷窥”网络请求，调试效率从此起飞!

Charles介绍

Charles又名查尔斯是一个代理服务工具,如果你使用过Fiddler那么你就会知道代理服务是什么意思, 而今天我要说的这个Charles它也是一个HTTP代理服务器, Fiddler能做的事情，基本上它也可以做!

如图

也就是说Charles可以帮助我们监控浏览器发送的 请求与响应的所有信息, Charles就相当于一个代理服务器, 让它来给目标服务器之间建立连接!

这样一来Charles跟Fiddler很像了，也可以截取HTTP请求信息、也可以实现流量控制,比如模拟慢速网络，以及等待时间叫长的请求, 我们平常在做开发的时候，也可以借助它来调试Ajax,也可以很快的格式化XML/JSON这样子的数据,我们也可以通过Charles来截取并修改动态网络请求的参数,以便于达到我们想要的目的，你懂的!

比如: 当你在业务开发的时候，发送了一个请求到后端，但是最后在前端返回显示的结果却是乱码，或者出现别的什么奇奇怪怪的效果，这个时候，我们就需要通过抓包来判断到底是前端还是后端出现了问题,从而准确定位!

总之作为开发者的我们，可以很轻松的利用Charles查看所有连接互联网的HTTP通信, 虽然Charles跟Fiddler的功能都差不多，但是Charles还是有自身独具特色的优点值得我们去学习它!

预备知识

对于学习抓包来说你肯定要知道什么是HTTP，如果你对HTTP都不是很了解的话，那么抓包就毫无意义，所以你在抓包之前，最好对HTTP的请求、响应报文要有初步的一个了解才行，这里我建议大家去看一下我的Fiddler抓包教程，里面有详细的HTTP基础教程保证你一看就懂!

Charles安装

首先我们要先安装Charles， 大家可以到它的官网上去下载!

官方地址 https://www.charlesproxy.com

如图

根据自己的系统类型下载即可! 这里我下载的是windows版本的!

下载之后，直接双击安装包就可以按照提示安装了，方法就跟普通软件一样，这没什么好说的， 直接下一步就OK

如图

其实安装步骤中，最关键的就是安装路径，我个人建议不要安装在C盘下就行了!

如图

最后点击Finish完成即可!

Charles授权码方案

当我们第一次打开Charles的时候，我们先要进行授权使用!

在Charles中点击菜单栏上的Help-->Register Charles, 然后把名称和授权码输入进去,重启Charles即可

如图

授权码我们可以关注我们最下方的公众号 回复Charles即可获取小管道(传送门)

我就不多说了, 大家都懂的!!

输入完成之后，点击Register完成注册，重启Charles

如图

Charles 工作区

其实作为我们开发人员，在实际开发中有的时候会遇见一些问题需要通过抓包来分析前后端的数据通信问题，以便于我们排查开发中的实际困难,这一点其实就是我们最常见的一种测试手段!

那么Charles就可以来帮助我们完成这个事情,但是首先，我们必须清楚Charles的基本工作环境和界面!

这样有助于我们在开发调试中使用Charles更加得心应手!

Charles的操作界面其实很简单, 首先我们来看看Charles的大体布局结构

主导航栏

这里我们主要介绍一下主导航栏上的工具栏的各种按钮的含义

如图

具体含义如下表:

请求列表导航栏

在Charles中抓包请求与响应主要分为两种显示方式: Structure和Sequence 这两种视图形式!

Structure视图

这种事按照域名列表的形式进行显示请求数据,也就是说此类视图主要是将请求按访问的域名进行分类,并且这种模式下我们可以很清晰的看到请求的资源结构!

如图

同时我们也可以点击+号展开指定域名下的所有请求资源进行查看!

Sequence视图

这里的结果以数据请求的顺序来显示，最新的请求显示在最下面, 并且以详细信息的形式显示请求的数据, 比如size，status等信息,方便我们快速定位精准的数据!

如图

最后

我们在使用的时候，可以按照具体需要再这两种之间来回切换即可!

请求响应数据显示框

在这里我们可以详细的查看到客户端和服务器之间的请求和响应信息

如图

上面属于请求的内容, 下面属于响应的内容

我们在后续可以根据实际的操作结合现实的数据，再来具体的看每一个标签功能到底是什么意思, 便于理解!

同时我们在请求响应显示框还可以切换导航栏选项卡查看请求的各种详细情况!

这里主要分为5个选项卡, 如下表:

选项名称	描述
Overview	显示当前请求的总体情况和信息
content
summary
chart
notes

Overview选项

对于当前请求的一个大致信息Overview里面都有显示, 并且以name和value键值对的形式给我们列出来!

例如

那么name列表中的含义如下表:

基础部分

名称	描述
URL	统一资源定位符
Status	状态是否已完成
Response Code	响应的HTTP状态码
Protocol	当前这个请求会话使用的协议 例如: Http/https/ftp...
host	DNS可解析的名称, 同时也可以是ipv4或者ipv6的地址名
Path	服务器上的文件路径来定位特指的资源!

TLS安全传输层协议信息

展开TLS我们可以看到以下信息

名称	描述
Protocol	当前这个请求会话使用的协议 例如: Http/https/ftp...
Session Resumed	会话恢复
Cipher Suit	密码套件
ALPN	应用层协议协商, ALPN让应用层可以协商在安全连接层之上使用什么协议
Client Certificates	客户端证书
Sever Certificates	服务端证书
Method	当前会话的请求方法: get/post/put
Kept Alive	在TCP中一个可以检测死连接的机制!
Content-Type	HTTP响应的Content-type头
Client Address	客户端地址
Remote Address	远程地址
Tags	标签

Connection连接信息

这里可以显示服务端和客户端的连接句柄资源, 展开可以看到以下信息

名称	描述
Client Connection	客户端连接
Server Connection	服务端连接

WebSocket相关信息

名称	描述
Origin	源头域名地址
Version	版本
Protocol	协议, 比如: binary, base64, pbbp2
Extensions	扩展, 比如:permessage-deflate; client_max_window_bits
Messages Sent	消息发送
Messages Received	消息接收
Control Frames Sent	控制帧发送
Control Frames Received	控制帧接收

Timing时间相关信息

名称	描述
Request Start Time	接收到第一个请求的第一个字节时间点: 格式: xxxx-xx-xx xx:xx:xx
Request End Time	发送到客户端最后一个响应的最后一个字节时间 格式: xxxx-xx-xx xx:xx:xx
Response Start Time	响应开始时间
Response End Time	响应结束时间
Duration	整个请求 到 响应的持续时间
DNS	选中的会话解析DNS所花费的时间的总和
Connect	选中的会话建立TCP/IP连接所花费的时间总和
TLS Handshake	TLS握手协议时长
Request	请求耗费的时间
Response	响应耗费的时间
Latency	延迟时间
Speed	速度
Request Speed	请求速度
Response Speed	响应速度

Size请求大小信息

名称	描述
Request	请求大小
Response	响应大小
Total	请求+响应的字节大小

Contents选项

Contents选项卡中，我们可以清晰的看到HTTP的请求与响应信息!

只要你对HTTP了解，这里基本上就能看明白!

例如

在Contents中又主要分为请求内容导航工具栏和响应内容导航工具栏

请求内容导航工具栏

请求内容导航工具栏是对请求内容进行不同形式的展示，我们可以切换至对应展示内容的标签

如图

标签含义如下表:

名称	描述
Headers	当前请求的头信息
Query String	请求查询参数列表
Cookie	请求所带的Cookie参数`
Raw	用HTTP原样展示的形式显示当前请求内容头信息

响应内容导航工具栏

响应内容导航工具栏 也是同样的道理, 根据某一接口请求的响应内容，我们也可以切换响应内容导航工具栏来进行查看响应的各种详细情况!

如图

标签含义如下表:

名称	描述
Headers	响应的头信息
Text	用文本形式显示响应内容
Hex	用十六进制显示响应内容
JavaScript	用JavaScript中的JSON对象格式查看响应内容
JSON	以JSON目录的格式查看响应内容
JSON Text	以JSON文本的格式查看响应内容 这种跟JavaScript感觉差不多
Raw	用HTTP完整响应报文的形式展示响应内容

注意:响应内容导航工具栏和请求内容导航工具栏都会根据不同的请求接口而导致展示的内容也会不一致，但是大概都是这些信息!

Summary选项

这里主要是显示请求资源的详情信息，包含加载时间、状态码、域名主机等等!

例如

Chart 选项

以时间进度条图像的形式显示资源请求的时间信息, 比如整个资源请求 到响应的持续时间

例如

更多设置

有些朋友会说请求响应数据选项卡这里显示的东西不一样，可能有些朋友看到的是如下形式的选项卡

如图

而有些朋友看到的则是如下情况:

如图

这个其实就是界面设置的原因, 设置的方法也很简单!

我们可以直接点击Charles中的菜单栏执行: Edit-->Preferences

如图

然后在弹出的界面中，点击viewers选项卡,

并且取消Combine header and body viewers和Combine request and response前面的对钩即可!

如图

这样你就可以看到request和response选项卡了, 个人觉得这样可以更加清晰的查看HTTP请求与响应

Charles调整字体大小

我们可以点击工具栏上的齿轮按钮, 然后选择Preferences(偏好设置)

然后选择User Interface(用户界面)选显卡中的Display font(显示字体)设置就可以了!

如图

效果如下

Charles 抓包原理

其实不管对于Fiddler还是Charles等等抓包工具来说，抓包的原理大致都相同!

我们可以来看一张流程图!

如图

Charles 本地localhost抓包

其实我们在使用Charles抓取本地HTTP请求的时候，你会发现在请求列表中根本就捕获不到localhost

愿意其实在Charles的官网上有解释!

地址: https://www.charlesproxy.com/documentation/faqs/

如图

这段话是Charles官方给出的一个解决方案，其实很简单!

就是我们在本地访问的时候使用 http://localhost.charlesproxy.com 来代替指向http://localhost的这个地址,那么Charles的请求列表中，就会正常显示了!

因为Charles启动后这个http://localhost.charlesproxy.com就会默认指向到http://localhost

所以我们在使用Charles来抓取本地localhost请求的时候，就直接用如下方式访问就可以了!

http://localhost.charlesproxy.com

举个栗子

这里我用wamp启动了一个PHP的服务环境, 并且在这个环境下我们简单新建一个项目test4

然后使用phpStorm新建一个项目指向到test4下，然后新建一个index.php文件,写一段简单的代码

如图

代码

<?php
  echo 'Hello World';
?>

然后此时我们再来访问一下http://localhost.charlesproxy.com/test4/index.php

如图

从浏览器访问上来看没有任何问题， 也就是用这个地址去请求到test4/index.php文件

再看看Charles抓取一下看看是什么效果!

如图

这样就完成了一个很简单的本地请求抓包!

Charles 安装证书

为什么要安装证书

前面也说过了Charles相当于一个中间代理, 也就是说Charles作为一个中间代理在客户端和服务器之间进行通信,并且相互通信的数据可以被Charles拦截或者篡改, 但是默认情况下我们的Charles是识别不了HTTPS的

如图

也就是说默认情况下，抓取的请求数据列表中显示的HTTPS请求还有可能显示unknown(未知)的提示, 并且所抓取的请求信息还可能是乱码!

如图

所以我们必须要通过安装Charles的HTTPS证书，这样才可以告诉操作系统信任Charles作为一个中间代理，从而允许Charles捕获、解密和显示HTTPS请求和响应的内容, 从而更好的去使用Charles来查看和分析HTTPS请求的详细信息，包括请求的URL、请求头、请求体、响应状态码、响应头等信息!

否则我们用Charles直接抓包是抓取不了HTTPS请求的，默认就只能抓取到HTTP类型的数据包信息, 所以需要安装SSL证书才可以!

注意

我们在刚刚开始使用Charles的时候，可能没有安装SSL证书的情况下，可能也会导致我们无法直接打开浏览器访问页面的情况!

如图

所以这一点也是新手朋友们需要注意的地方!

SSL介绍

SSL简单的说其实就是HTTP的升级版，也就是在HTTP上加入SSL, 我们所熟知的HTTPS安全基础是SSL，为的是让在网络传出过程中，内容的加密,让它们更加安全，所以就需要SSL

很多书籍在HTTP和HTTPS的区别中,都有所提到, HTTP是明文传输，HTTPS则是具有安全性的SSL加密传输

并且它们的端口都是不一样的， HTTP是80，HTTPS是443 了解这些对于我们后面设置Charles有很大帮助!

SSL证书安装步骤

安装SSL证书的步骤也很简单, 具体操作如下

在Charles中选择Help菜单，然后选择SSL Proxying-->Install Charles Root Certificate

如图

然后再弹出的对话框中选择安装证书

如图

接着我们在弹出的对话框中选择本地计算机,然后下一步

如图

然后来到证书存储设置, 选择将所有的证书都放入下列存储选项

如图

然后点击浏览, 选择受信任的根证书颁发机构, 然后点击确定!

如图

最后点击下一步，完成安装!

如图

SSL代理设置 解决HTTPS抓包乱码问题

有些小伙伴会遇到这样一个问题，就是我们按照正常的流程安装了SSL证书，但是抓取HTTPS依旧无法正常进行捕获，并且请求和响应信息中还是乱码，如果你遇见这个问题，那么解决办法也很简单!

首先在Charles中找到我们的Proxy -- > SSL Proxying Settting(SSL代理设置)

如图

然后我们在SSL Proxying选项卡中点击Add添加

如图

然后在Host和Prot中分别输入: * 和 443 即可!

这里的*号则表示接收任何主机!

如图

当然你也可以设置填写Host为*、Port为*

如图

点击OK重启Charles我们再试试抓包是否正常!

现在我们来抓取www.baidu.com的请求响应信息看看效果!

如图

通过SSL代理设置之后，我们就可以在Charles中正常的捕获HTTPS流量了! ~~

小结

Charles抓包一定要记住刚刚安装好之后,需要安装证书然后进行一些配置才能够正常获取到HTTPS抓包!

其他Charles 抓包相关设置

在我们使用Charles正式抓包之前，我们是需要进行代理设置的,否则就不能正常使用Charles

端口号设置

首先我们要在Charles中进行端口号的设置，首先打开我们的Proxy Settings

如图

然后这里我们默认把Prot端口设置为:8888就行了

如图

当然如果有其他程序占用了这个端口号，那么可能就需要修改为其他端口号!

PC 设置代理

这里以win10为例,直接打开设置中选择网络然后选择代理就可以了,把使用代理服务器的选项打开就可以了!

如图

这样PC电脑上抓包的设置就完成了!

Charles 移动端APP抓包

Charles抓包不仅仅可以抓取来在PC端的HTTP请求，也能够抓取来自手机端发出的HTTP请求，

注意: 使用Charles进行手机端抓包需要在PC端进行配置下，并且需要移动设备和PC处于同一网络环境中!

首先我要再次提醒Charles中的代理端口号的设置是多少自己要清楚, 我这里设置的是8888

方便到时候移动端设备在同一网络环境下,能够找到端口号为Charles的代理程序!

如图

然后我们就可以进行手机端的代理设置了!

端口是什么?

这里简单普及一下端口的知识,端口号确实代表电脑上的某个运行的程序入口, 在计算机网络中，端口号(Port Number)是用于标识计算机上特定服务的数字标签,这些端口使得网络上的应用程序可以通过不同的通道与计算机进行通信!

注意: IP地址用于标识网络上的计算机，而端口号则用于标识该计算机上的特定服务或者程序,在这里我们指的就是Charles这个程序!

所以我们这里设置Charles的端口号就是为了让我们在自己的局域网中找到Charles这个程序作为代理!

实际上就是在告诉Charles在哪个端口上监听传入的代理请求!

一旦我们在其他设备或计算机上配置了相应的代理设置，这些设备或计算机就会将它们的网络请求发送到Charles所在的计算机的该端口上, Charles然后会捕获这些请求，允许我们查看、修改或转发它们，最后再将响应返回给原始设备或计算机!

原理如下图:

如图

通过正确设置Charles的端口号，我们可以确保在局域网中能够找到并配置Charles作为代理服务器，从而捕获和分析网络请求和响应。

iOS手机端抓包

首先一定要保证你的手机和电脑处于同一网络环境下,

苹果手机具体设置步骤,也很简单, 我们打开手机的设置界面, 然后选择【无线局域网】这个选项

如图

然后点击你自己连接WIFI后面的感叹号

如图

然后往下拉找到配置代理选择手动

如图

然后根据你自己的电脑网络环境查看到本机的IP地址, 你也可以从cmd命令行中使用ipconfig命令去查看自己电脑局域网的IP地址!

如图

我这里为:192.168.3.13 就代表我这个本地计算机，而端口号就是前面我们设置的8888

现在我们就可以把IP地址和端口号 填入到代理配置的服务器和端口上面去了,最后点击存储即可!

如图

其实现在我们就可以来打开Charles来尝试一下 能不能抓取iOS手机端的数据了!

然后你可能会看到Charles给你反馈一个提示:

如图

这个意思是iOS手机端IP地址为192.168.3.2尝试连接到Charles

所以这里我们应该点击Allow(允许)受信任的用户设备来访问Charles

这样做了以后并不能马上让你通过Charles来抓取iOS的数据，我们还需要做一些设置!

首先打开Charles 选择菜单栏上的 Help-->SSL Proxying-->Install Charles Root Certificate on a Mobile Device or Remote Browser在移动设备或远程浏览器上安装Charles Root证书

如图

然后这里就会提示我们在当前的这个本地计算机地址为:192.168.3.13:8888上将设备配置为使用Charles作为其HTTPP代理的意思, 并且也会告诉我们手机证书下载的地址

如图

那么接下来我们就可以到iOS手机端打开Safari浏览器输入地址为https://chls.pro/ssl去下载并安装证书!

如图

这里在出现的提示上点击允许, 然后证书就会下载到手机当中了!

如图

然后我们打开苹果手机的设置找到已下载描述文件

如图

然后点击下载的证书!

如图

最后我们跟着提示点击安装即可!

如图

安装完成之后，别忘记在手机中打开信任Charles证书

步骤: 设置-->通用-->关于本机-->证书信任设置-->开启信任charles 然后打开Charles证书信任设置!

如图

那么如果不出意外的话，现在你就可以打开你的手机APP然后同时也查看Charles的请求数据列表,就会有你所抓取到iOS手机APP的请求与响应的信息了!

让我们来看看效果如何吧!

如图

我们在来试试看抓取QQ的数据资料看看行不行~!

如图

最后提醒一下，不使用代理的时候把手机代理关闭了!

Charles请求Filter(过滤)

在请求列表的底部都有一个Filter(过滤), 我们可以通过一些域名的名称来过滤出我们想要的请求列表信息!

这样我们就可以只提取到目标网站的数据包了!

如果你不过滤一下请求，那么对于刚刚接触抓包的朋友，那么你可能在抓包的过程当中就会看到很多不相干的抓包信息!

例如:这里我们抓包一下www.baidu.com搜索引擎首页!

如图

那么这个时候我们就需要再Filter中输入一个关键字baidu 或者 更加精确一点www.baidu.com

如图

当然你也可以根据需求来批量添加指定的目标网站数据封包了，设置也很简单

我们在Charles的菜单栏选择Proxy-->Recording Settings

如图

然后选择Include选项卡，点击Add添加一个请求过滤

这里的意思就是只记录和显示以下列表中之一匹配的请求, 如果此列表为空，则将记录所有请求!

如图

最后填入需要进行抓包的的协议，主机地址，端口号以及参数路径，这样就也可以指定获取目标页面的数据信息

例如

这样的好处也可以过滤出你想要的，并且还可以批量添加!

聚焦过滤

我们也可以选中想要过滤的资源地址, 然后鼠标右键，选中Focus让选择的资源成为焦点

如图

然后选择Sequence选项卡, 再点击fillter后面的focused(聚焦)来筛选出我们做的focus标记的资源

如图

并且大家应该也注意到了，当你设置某个域名地址为焦点的时候，这时会把聚焦的域名单独显示在最上面，而其它没有聚焦的域名，都会在Other Hosts里显示!

如图

我们还可以通过Charles中菜单栏的View-->Focused Hosts命令来管理聚焦的域名!

你可以再这里再次添加和删除聚焦的域名,还可以导入和导出聚焦的域名列表名单!

如图

Charles 弱网测试

什么叫弱网测试

弱网测试顾名思义就是我们可以通过Charles这个工具来限制网速从而达到测试的一种目的手段!

弱网测试的作用

在Charles中进行弱网测试是非常有用的，主要体现在以下一些方面:

模拟真实网络环境：Charles可以模拟不同的网络环境，包括弱网络环境，以测试应用程序在这些环境下的表现。这对于移动应用尤为重要，因为移动应用通常需要在各种网络条件下运行，包括网络信号不稳定、延迟高、丢包等弱网环境

发现问题并进行优化：通过弱网测试，可以发现应用程序在弱网络环境下可能出现的问题，如页面响应时间延长、页面呈现错误、超时处理不当等等问题!

提升用户体验：弱网测试的目的是保障用户在复杂网络环境下的使用体验。通过优化应用程序在弱网环境下的表现，可以减少用户在使用过程中可能遇到的困扰，提升用户满意度。

如何开启弱网

总的来说，Charles中的弱网测试对于确保移动应用在各种网络条件下的稳定性和可靠性至关重要，有助于提升用户体验和应用程序的整体质量, 那么在Charles当中设置网络限速也是非常简单的

我们打开Charles中的菜单栏，然后选择Proxy-->Throttle Setting 这个选项

然后勾选Enable Throttle这个选项之后，其实就默认开启了网络限速了!

如图

这个时候你访问网页的时候，就会很慢了!

当然你也可以勾选上only for selected host这个选项, 然后点击Add指定哪些网站会被限速,并且不影响其他网站和应用, 如果不勾选，那么对所有的请求都进行限制!

如图

你还可以自定义添加很多!

并且我们还可以在下面的设置中对网络进行详细的修改已达到更加精准的效果!

比如在Throttle preset中我们可以设置网络预设, 这些预设都是一些常见的网络情况

如图

我们也可以在Bandwidth中去设置一个网速的上传和下载的速率范围, 单位为kbps

其他更多设置如下表

名称	描述
utilisation	带宽利用率，利用率是总带宽的百分比，大部分modem是100%
round-trip latency	请求往返延迟，单位是ms, 主要测试往返客户端和远程服务器之间第一次往返通信的毫秒延迟!
MTU	最大传输单元，即TCP包的大小，可以更真实模拟TCP层，每次传输的数据包情况!
Releability	指连接的可靠性，常说的丢包,用于模拟网络不稳定,衡量连接完全失败的可能性,这是一个非常有用的模拟不可靠网络条件的选项!
Stability	连接稳定性常说的网络抖动。也会影响带宽可用性。用于模拟移动网络，移动网络连接一般不可靠。
unstable quality range	设置网络质量范围,可以用来确定网络不稳定质量范围, 如stability稳定性设置了70%，那不稳定性则可以设置20~30之间。
..............................................................

注意:如果勾选了only for selected host这个选项，那么下面所有设置的参数效果都只会被应用到指定的主机!

同时我们也可以将自己常用的网络调试设置进行预设存储，这样我们就不用每次都重新设置了,方法也很简单!

在Throttle Setting对话框中点击Add Preset,添加预设就可以了

如图

然后你在Throttle preset中就可以找到刚刚添加好的预设了

如图

弱网测试实战

一般情况下，在线项目产品的请求与响应的总时长应该是要小于2 ~ 3秒，算是正常!

我们可以来查看一个页面在Charles未开启弱网情况下请求与响应的总时长

如图

在这里我们可以看到Duration就是请求和响应的总时间为1.42s，

当我们开启弱网情况下，我们再看看Duration参数的显示

比如我们把Throttle preset这个网络预设设置为56kbps Modem

如图

现在可以看到Duration就是请求和响应的总时间为37.89s，很明显网络慢了很多!

当然实际开发和项目运行在不同的网络场景下会出现更多的不可预料的情况,不同的网络环境和网络制式的差异，都会对用户使用我们开发的应用程序造成影响!

所以对于各种网络环境有异常的情况下, 用户可能就会遇到应用程序强制退出,数据丢失等问题! 因此对应用程序的网络测试尤为重要，才能更好的避免这些问题的发生!

Charles 压力测试

所谓压力测试其实就是重复请求某个资源或者接口的意思!

在Charles我们可以设定单次请求，也就是一次只请求一次，也可以一次执行多次请求, 也可以设置多个线程的并发请求！这种需求基本上我们在实际开发项目中也是会经常使用到的!

举个栗子

我们就可以模拟N个客户端向服务端发送网络请求, 看看应用程序是否可以顶住压力, 从而针对问题来优化我们的后端程序,让代码更加健壮!

比如:我们可以在Charles对某个资源进行重复发送一次请求, 操作其实很简单, 选择请求列表中的目标之后，然后右键选择Repeat就可以对该资源进行重复发送一次请求！

当然我们也可以点击工具栏上的重复选择的请求快捷操作按钮也是一样的效果!

如图

当然你也可以按住shift快捷键,然后同时在请求列表中选择多个资源之后再次执行右键选择Repeat命令!

如图

同时我们也可以使用Advanced Repeat命令来进行自定义自动重复请求次数的间隔性请求, 这样更加方便我们进行并发测试!

如图

同样也是选择请求列表中的目标资源之后，然后右键选择Repeat Advanced,会弹出一个对话框

如图

含义如下:

这里的Repeat 1 request 重复1个请求，因为选择了1个请求

如果选择了10个请求，那么这里就会显示 Request 10 requests

Iterations 设置每个资源的请求次数!

Concurrency 设置多少个线程来完成Iterations设置的请求量!

show results in new Session 将并发的请求内容数据展示在新的session会话选项卡中, 一般勾选上, 可以理解为重新打开一个session窗口显示重复的请求内容!

Repeat delay (ms) 每次重复请求会延迟多长时间再开始下一个请求 ，单位是ms

举个栗子

例如我要让某个资源自动请求10次 用1个线程来完成, 并且最后在新的session会话选项卡中打开显示!

如图

通常情况下Charles的并发操作在日常的测试工作中简单的压制一下服务端的稳定性还是可以满足的

Charles 断点调试篡改数据的神操作

我们也可以通过Charles来轻松篡改HTTP请求的参数或者返回的参数信息进行开发测试

比如类似于一些支付接口，涉及用户登陆权限的接口参数, 我们都可以通过这种手段来达到测试效果的目的!

我们就用一个简单的本地后端请求来试试Charles是如何篡改的数据!

例如

http://localhost.charlesproxy.com/test4/test.php

这里我用一个本地的后端地址来做测试, 然后准备一个test.php文件，其中的代码如下

代码

if (isset($_GET['data'])) {
    if ($_GET['data'] == 'userlist') {
        //返回的数据数组
        $data = [
            array('user' => '张三','password'=>123,'age'=>'18','company'=>'重庆市科技公司'),
            array('user' => '李四','password'=>'abcd','age'=>'22','company'=>'北京市科技公司'),
            array('user' => '王五','password'=>'abcd123456','age'=>'56','company'=>'深圳市科技公司'),
        ];
        //把数组为JSON格式
        $modifiedResponse = json_encode($data, JSON_UNESCAPED_UNICODE);
        //输出修改后的JSON数据
        echo $modifiedResponse;
    }
} else {
    echo 'Error 没有接受到任何参数!';
    exit();
}

我们如果直接请求这个地址那么必然会返回: Error 没有接受到任何参数!这个字符串!

现在我们打开Charles 然后在刷新一下请求, 在请求列表中找到我们要篡改数据的请求链接地址, 然后鼠标右键勾选Breakpoints(断点)

如图

这个时候我们会发现工具栏的六边形按钮就会变为红色的了!

如图

我们还可以对断点进行详细设置，选择菜单栏中的proxy-->Breakoint Setting,

如图

在弹出的断点设置对话框中双击想打断点的请求URL地址，进行断点编辑

如图

Edit Breakpoint(编辑断点对话框)设置选项参数解释如下表:

名称	描述
Scheme	进行断点的方法, 例如: GET/POST
Protocol	网络协议，一般选择HTTP 和HTTPS
Host	域名或者IP地址
Query	URL地址栏?号后面拼接的查询参数
Request	可以让发送请求的时候执行断点,并修改请求内容, 之后再把请求代理发送到服务器
Response	可以让响应的时候执行断点,并修改请求内容,之后再把响应结果代理发送到客户端

如果修改请求Request数据，就把Request勾选上，修改响应Response数据，就将Response勾选上，通常情况下默认都勾选上即可!

此时我们就可以在移动端或者PC端重新进行发送请求或者回车(Enter), 不出意外的话Charles会自动进行拦截并跳转到请求数据修改的界面!

注意:如果没有自动跳转到数据修改界面的情况下，我建议每次添加了断点之后，重启一下Charles,就可以了!

如图

这里我们需要指定一个data=userlist的地址栏查询参数, 所以点击Add添加就可以了

参数添加好了之后就点击Execute(执行)

如图

此时此刻就是Charles帮我们携带了一个data=userlist的地址栏参数给我发送的请求了!

然后你就会看到返回的结果, 而重点就是在这里，我们目前是打了点断对吧，那么此时此刻请求的结果还没有完完全全的回到客户端，还被Charles卡在这里，所以我们可以进行响应数据的编辑修改!

我们可以编辑HTTP响应头、响应数据等等.. 我们选择Edit Response(编辑响应)

这里我选择的是JSON Text, 然后就可以随意修改你从后端拿到的数据!

如图

修改完成之后，再点击Execute(执行)返回

如图

这个时候，你就会发现从后端服务器返回过来的数据是被篡改过的了!

如图

同时在客户端的浏览器上显示的数据，也是被Charles篡改过的了!

如图

怎么样操作是不是很简单，整个过程的大致原理如下图:

如图

其实跟之前我们使用过的Fiddler基本上很类似，但是我个人偏向于使用Charles, 操作更加便捷!

注意: 这里的断点功能将网络请求拦截并修改过程中，整个网络请求的计时并不会暂停，那么如果我们停留时间太,就可能导致客户端请求超时的问题!

小结

打断点的意义就在意方便我们做各种各样的测试,

如果请求打断点，目的就是为了看是否可以绕过前端限制,将修改过的参数传给服务端, 根据后端响应的情况来判断问题!

如果响应打断点, 目的通常就是把篡改的服务端数据返回到前端，看看前端是不是有异常情况发生!