Charles抓包_charles 怎么抓html静态页面-CSDN博客

我们在开发网站项目的时候，我们可以通过浏览器的debug模式来看request以及response的数据，那么如果我们开发移动端项目没有网页呢？如何抓取数据呢？

前几天有个做服务端的师弟跟我说他不用抓包工具，遇到问题直接debug代码，那我问他，如果线上服务的话，你怎么调？在实际项目中，没有遇到跟客户端相互扯皮的事情吗？我觉得很正常啊，客户端说他没问题，服务端也说他没问题，到底谁有问题？这时候没必要相互推脱，拿数据出来说话才是王道。抓包工具做了什么？它把客户端的请求数据，以及服务端返回的数据完完整整的抓取下来，供攻城狮分析问题。所以首先分析问题才是最重要的，而不是一上来就跟踪代码debug。

Charles

是一个HTTP代理服务器,HTTP监视器,反转代理服务器，当程序连接Charles的代理访问互联网时，Charles可以监控这个程序发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信，这些包括request, response和HTTP headers （包含cookies与caching信息）。

Charles主要功能:

1. 支持SSL代理。可以截取分析SSL的请求。

2. 支持流量控制。可以模拟慢速网络以及等待时间（latency）较长的请求。

3. 支持AJAX调试。可以自动将json或xml数据格式化，方便查看。

4. 支持AMF调试。可以将Flash Remoting 或 Flex Remoting信息格式化，方便查看。

5. 支持重发网络请求，方便后端调试。

6. 支持修改网络请求参数。

7. 支持网络请求的截获并动态修改。

8. 检查HTML，CSS和RSS内容是否符合W3C标准。

Charles安装：

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

Charles是收费软件，可以免费试用30天。试用期过后，未付费的用户仍然可以继续使用，但是每次使用时间不能超过30分钟，并且启动时将会有10秒种的延时。

因此，该付费方案对广大用户还是相当友好的，即使你长期不付费，也能使用完整的软件功能。只是当你需要长时间进行封包调试时，会因为Charles强制关闭而遇到影响。（偷偷告诉你，公众号回复“Charles”获取破解版下载链接）

Charles的功能很强大，我们这里只介绍几个常用的并且非常实用的功能：

1. 将Charles设置成系统代理

2. 截取移动设备上的网络请求包

2.1手动重复请求（Repeat，Advanced Repeat）

2.2手动模拟请求（Compose）

2.3修改网络请求内容（Compose）

3. 过滤网络请求

4. 代理转发

5. 支持https请求抓包（如果配置了还是抓不到，下面有解决方案）

Charles 主要提供两种查看封包的视图，分别名为 “Structure” 和 “Sequence”。

1. Structure 视图将网络请求按访问的域名分类。

2. Sequence 视图将网络请求按访问的时间排序。

下面将一一介绍这些如何配置和使用

一. 将Charles设置成系统代理

Charles 是通过将自己设置成代理服务器来完成抓包的，勾选系统代理后，系统本地发出去的请求都能被截取下来。如果只抓取APP的包的话，可关闭此配置，这样不会出现太多的数据看着比较乱。

Mac

Windows:

需要注意的是，Chrome 和 Firefox 浏览器默认并不使用系统的代理服务器设置，而 Charles 是通过将自己设置成代理服务器来完成封包截取的，所以在默认情况下无法截取 Chrome 和 Firefox 浏览器的网络通讯内容。如果你需要截取的话，在 Chrome 中设置成使用系统的代理服务器设置即可，或者直接将代理服务器设置成 127.0.0.1:8888 也可达到相同效果。

二. 截取移动设备上的网络请求包

我们在调试移动APP时，需要抓取APP发送的数据包，首先进行设置，Proxy -> Proxy Settings默认端口是8888，根据实际情况可修改。

查看本机IP地址：Help -> Local IP Addresses

然后配置手机代理：

IOS和Android配置差不多

打开要调试的APP，请求就会先发送到Charles，然后验证是否允许访问。

当点击允许后，可以在Proxy -> Access Control Settings里看到可以访问此代理服务器列表

注意

如果不小心点击了拒绝，可以手动添加手机IP/Mac地址到允许访问列表，或者重启Charles，手机再次访问，会再次提示选择。

如果不想每换一个手机都要进行验证，可以配置允许所有手机访问，加入

0.0.0.0/0（IPv4）或::/0（IPv6）

现在就可以抓包了，拿一款我们公司开发的乐视车联APP来做测试：

三. 过滤网络请求

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

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

2. 在Charles的菜单栏选择"Proxy"->"Recording Settings"，然后选择Include栏，选择添加一个项目，然后填入需要监控的协议，主机地址，端口号。这样就可以只截取目标网站的封包了。如下图所示：（固定过滤地址）

四. 代理转发

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

请求转发，把调用方调用的地址转发到你本机地址的程序进行执行。

右键 -> Map Remote ...

并且配置Tools -> Map Romote

运行APP

五. Https请求抓包

默认我们是看不到https的请求数据的。我们需要安装证书。

Mac:

双击打开Charles Proxy CA

手机配置完代理（必须的操作）后，浏览器打开http://chls.pro/ssl

然后配置Proxy -> SSL Proxying Settings... 添加要抓取的https请求

然后再次请求：

如果不再使用Charles，想删除手机里的证书文件怎么删除呢？

设置->通用->描述文件与设备管理，删除指定的证书即可

Windows:

下一步

然后继续下一步直到导入成功。

剩下的配置与Max下配置相同

SSL的问题：

最近iPhone系统更新到ios 10.3后,用Charles抓包竟然出现了一些问题,https的请求都会失败,提示错误信息为Failure SSLHandshake: Received fatal alert: unknown_ca 和You may need to configure your browser or application to trust the Charles Root Certificate. 然而之前任何问题都没有,并且相关设置都正确:电脑上安装了Charles的根证书,并且设置了始终信任,然后手机上也登录了http://chls.pro/ssl安装了描述文件,一切都按正常程序走的,但是错误始终无法解决.

原因：

虽然charles的根证书已经在安装列表中显示,但它是被关闭的。在iOS 10.3之前,当你将安装一个自定义证书,iOS会默认信任,不需要进一步的设置。而iOS 10.3之后,安装新的自定义证书默认是不受信任的。如果要信任已安装的自定义证书,需要手动打开开关以信任证书。

解决：

设置->通用->关于本机->证书信任设置-> 找到charles proxy custom root certificate然后信任该证书即可.

Windows系统无法上网的问题

在windows下，如果Charles没有正常关闭，或者系统重启后无法上网的问题，因为Charles做了系统代理，当上网的时候，首先先访问代理服务器，然后代理再去链接网络，这时候Charles是非正常关闭的，只要重新打开Charles即可上网正常，正常关闭Charles后同样没问题。

写给测试人员的

另外抓包工具不只是开发人员独享的，任何一个参与项目的人都可以使用，测试工程师，运维，产品经理等等任何对技术感兴趣的人，尤其是测试工程师，在测试的过程中遇到问题，不是简单的bug记录员，而要做到问题的分析员，这才是真正的“工程师”，当bug真正的到开发这的时候，他拿到的是不仅仅是bug，包含了分析过程，分析的数据，甚至是解决方案。我觉得这才是标准工作方式。

举个例子，现在是移动互联网时代，那么我们开发的客户端必然包括Android和IOS版本，同样的功能必然在不同的客户端都有实现，比如同样的功能Android能用，而IOS不能用，这时候对于测试人员来说，他可以简单的提个bug说某个功能Android能用，ISO不能用，请开发人员解决。这个问题应该给谁呢？IOS开发，是IOS缺少请求参数？服务端开发，是服务端缺少对IOS的兼容吗？为了能让问题解决，可能要写两个相同的bug发给不同的人，那我们开发看到这样的问题，首先重现问题，那么肯定要跟测试人再次沟通，问问当时的测试过程，然后模拟同样的数据进行复现。

那么如果我们的测试工程师换一种工作方式呢？当遇到问题的时候，用抓包工具把数据抓下来，首先比较Android和IOS发送请求参数有什么不同，比较一下返回的数据有什么不同，如果请求参数不同，那么测试人员通过模拟工具，把缺少的参数加上，那么返回的数据是不是就正确了呢？如果参数相同，返回的数据不同，或者是参数相同，返回的数据相同，这样的话，问题就显而易见了，测试人员可以把抓取的数据提交给相应的开发人员，而开发人员完全可以去debug了。提高测试人员的自身技能，而又提高了解决问题的效率，何乐而不为？

charles抓包的安装，使用说明以及常见问题解决(windows)

Charles 主要的功能包括：

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

一、安装

百度云盘破解版安装包下载：链接: https://pan.baidu.com/s/1kV3h0gf 密码: nqaa
官网下载：https://www.charlesproxy.com/download/

笔者使用的版本是：

二、使用说明

1 . 在手机上抓包配置过程：（安装完成，即可在PC机上直接使用，不需要配置！）

1 . 查看本机的IP 地址：

方法一：打开”运行”（快捷键：win+R键；或者在任务栏的”搜索”按钮中查找并点击”运行”），输入“cmd”后进入命令行窗口，在命令行窗口中输入”ipconfig”命令查看IP
方法二：在charles中查看：Help -> Local IP Address

2 . 查看端口：

3 . 在手机设备或者远程浏览器上设置代理，抓取手机设备上的请求包（手机和电脑必须在同一个局域网内，并关闭电脑防火墙、其他代理或者翻墙软件）

第一步：在手机wifi 上设置代理 -> 手动
- 服务器IP：PC机器的IP（通过之前介绍的查看IP的方法）
- 端口号：8888（通过之前介绍的查看端口的方法）
第二步：Charles弹出询问“allow”或者“deny”,点击“allow”按钮允许；

第三步：抓取https数据需要在手机上安装证书
Help -> SSL proxying -> Install charles root certificate on a Mobile Device or remote browser…
复制弹出层上的地址 http://charlesproxy.com/getssl或http://www.charlesproxy.com/ssl.zip 到手机浏览器打开，点击 here 下载，安装，信任；
截取https信息，pc机上也需要安装Charles的CA证书，还需要设置 SSL 代理
- 菜单栏 Help -> Install Charles CA SSL Certificates…
- 设置SSL代理
  - 选择Proxy -> SSL Proxying Settings -> SSL Proxy -> Add
  - Host : * (使用通配符表示检测所有网络请求；建议还是设置单个需要抓取的https host，尽量避免使用 * 通配符)
  - Port：443
！！！完成以上操作，就完成Charles抓取HTTP(S)数据包的所有配置了。查看Charles,我们可以看到数据包的内容了。

2 . 抓包字段的详细说明：

Structure：树状结构显示，将网络请求按访问的域名分类；
Sequence：水平结构显示，将网络请求按访问的时间排序
垃圾桶图标：功能是clear，清理掉所有请求显示信息
Filter ：过滤，可以输入关键字来快速筛选出 URL 中带指定关键字的网络请求
Overview ：查看这次请求的详细内容，例如耗时详细列车了请求开始时间、结束时间，响应开始时间、结束时间，总耗时、DNS耗时、网络延时等。
对于Size也详细列出了请求头大小、响应头大小、压缩比例等内容。
- - URL：进行网络请求的链接；
  - Status：当前状态，complete表示请求完成；
  - Responce Code：返回码。不同的接口，不同的请求结果，返回码都不同；
  - Protocol：使用的协议；
  - Method：请求方式，如GET请求，POST请求等；
  - Kept Alive：判断当前是否正在链接（活跃）；
  - Content-Type:发送的内容类型，如这里用的是XML文本，以UTF8的方式发送；
  - Client Address：客户端的IP地址；
  - Remote Address：远程服务器的IP；
- Timing:
  - Request Start Time：请求开始的时间；
  - Request End Time：请求结束的时间；
  - Response Start Time：返回开始的时间；
  - Response End Time : 返回结束的时间；
  - Duration : 总时间；
- Size:
  - Request Header ：请求的头部大小；
  - Response Header：返回的头部大小；
  - Request : 请求发送的大小；
  - Response：返回数据的大小；
  - Total：所有数据大小；
  - Request Compression : 请求压缩；
  - Response Compression : 返回压缩；
Request ：查看请求内容（底下的Headers，Query String，Cookies，Raw。）
- Headers：发送请求的头部信息；
- Query String : 发送参数列表；
- Cookies：浏览器缓存；
- Raw：发送的原生数据，包括了头部和参数；
Reponse : 查看响应内容
- Headers：是返回的头部信息；
- Text：返回信息（除去头部）后的文本；
- Hex：返回信息的16进制表示；
- XML：我返回的数据是XML。如果你返回的是JSON，这里就会显示JSON；
- XML Text：如果你返回JSON，这里会显示JSON Text；
- Raw：返回的所有原生数据，包括头部；
Summary: 查看发送数据的一些简要信息（主机，状态码，数据的类型，header和body大下，加载时间，总时间）
Chart: Summary中简要信息以图表形式展示
Notes: 其他信息

三、过滤网络请求

作用：快速筛选出 URL 中带指定关键字的网络请求。

方法一：在界面中部的 Filter 输入框中输入需要过滤的关键字，即可快速筛选出相关网络请求。（临时性的包过滤)

方法二： Charles菜单栏 -> Proxy ->Recording Settings ->include。（经常性的包过滤)

方法三：选中想过滤的网络请求，单击右键 -> 勾选Focus，然后在界面中 Filter输入框右侧的Foucssed选中。（临时性的包过滤)

四、设置映射（Map）

Map分 Map Remote 和 Map Local 两种。

Map Local : 将指定的网络请求重定向到本地文件。
Map Remote : 将指定的网络请求重定向到另一个网址请求地址。

1 . 设置本地映射（Map Local）

作用：把线上的静态资源映射到本地：这样当请求静态的html、js和css等资源的时候会使用本地的信息，方便调试并及时看效果。

1 . 设置本地映射

第一步：选中某一条包数据，右键，选择最低端的 Map Local

第二步：修改 path 为
如：【/yundai/*】这样的地址，设置local path 为【E:\webstorm\yd_h5\debug\】这样的本地路径；
表示所有的域名+/yundai/下面的目录都替换成，本地路径下的相对应的文件；

2 . 查看所有的本地映射

Tools -> Map Local , 可以查看所有的本地映射配置。

在Overview的Nodes中查看。

2 . 设置远程映射（Map Remote）

1 . 设置远程映射

第一步：选中某一条包数据，右键，选择最下面的 Map Remote
第二步：将请求映射到远端写好的接口。推荐一个生成接口的链接 Mocky：http://www.mocky.io/
如：本地请求按协议、主机、端口、路径和参数分别对应远程接口的相关字段，没有则不填；

2 . 查看所有的远程映射

Tools -> Map Remote , 可以查看所有的本地映射配置。

在Overview的Nodes中查看。

3 .重发网络请求

选中某调请求，右键选则 “Repeat”重复发送一次该请求；
选中某调请求，右键选则 “Repeat Advanced…”设置请求次数（Iterations），重复间隔（Concurrency），重复发送多次该请求。

4 . 修改网络请求参数

1.选中一条请求，右键选择“Edit”，就可以编辑请求内容。

2.在编辑框中修改请求内容，“cancle”取消修改，“Revert”恢复原状，返回原来的状态，“Excute”执行修改的请求。

3.修改完成之后，点击“Excute”，执行修改的请求。

4.返回修改后的响应内容。

5 . 网络请求的截获并动态修改

方法一：本地映射
- Charles进行抓包
- 选择某一个网络请求 > 鼠标右键 Save Response…
- 如果该请求返回的是一个json串，保存文件时需要保存rename.json
- 需要更改的请求点击右键 Map Local.. 指定到本地保存的renam.json.
- 通过在本地更改rename.json就可以自动的更改请求的返回值。
方法二：打断点（Breakpoints）
- 选择某一个网络请求 > 鼠标右键 Breakpoints
- 然后点击 Execute 执行，然后编辑返回值。
- 缺点：容易请求超时。还没等你调整完返回数据，app那边已经请求超时了。
方法三：远端映射
- 将App内部的请求映射到远端写好的接口。推荐一个可以自己生成接口的链接： Mocky：http://www.mocky.io/。
方法四：rewrite（mac上支持，但在windows上有点问题，暂不支持该方法）
- 菜单栏 Tools —> Rewrite
- 根据自己的需求重写…。
- 推荐网址：http://www.cnblogs.com/wonyun/p/5586746.html

常见问题解决

1 . 手机无法抓包的问题

检查是否配置好代理IP,端口号
检查是否与电脑在同一个局域网
检查是否关闭防火墙，代理，翻墙软件
弹出询问点击“allow”或者“deny”时，误点“deny”，关闭charles重启，手机再次浏览则会重新弹出询问

2 . 解决request和response信息中的中文乱码问题。

方法一：修改charles windows版本安装目录下也有一个Charles.ini的配置文件
- 原配置文件

working.directory=.
classpath.1=lib/charles.jar
main.class=com.xk72.charles.gui.MainWithClassLoader
vm.version.min=1.4
vm.heapsize.preferred=256M
vm.location=jre\bin\client\jvm.dll
vmarg.1=-Dsun.java2d.d3d=false
vmarg.2=-Djava.net.preferIPv4Stack=true
dde.enabled=true
dde.class=com.xk72.charles.win32.Win32DDEManager
dde.server.name=Charles
dde.topic=System
single.instance=dde

[ErrorMessages]
java.not.found=A suitable Java installation was not found. Please visit http://java.com/ to install Java.
java.failed=The Java installation is broken. Please uninstall and reinstall Java from http://java.com/

- 修改后的配置文件增加vmarg.3参数，并设置编码格式为UTF-8

working.directory=.
classpath.1=lib/charles.jar
main.class=com.xk72.charles.gui.MainWithClassLoader
vm.version.min=1.4
vm.heapsize.preferred=256M
vm.location=jre\bin\client\jvm.dll
vmarg.1=-Dsun.java2d.d3d=false
vmarg.2=-Djava.net.preferIPv4Stack=true
vmarg.3=-Dfile.encoding=UTF-8
dde.enabled=true
dde.class=com.xk72.charles.win32.Win32DDEManager
dde.server.name=Charles
dde.topic=System
single.instance=dde

[ErrorMessages]
java.not.found=A suitable Java installation was not found. Please visit http://java.com/ to install Java.
java.failed=The Java installation is broken. Please uninstall and reinstall Java from http://java.com/

方法二： Tools -> Rewrite… -> Rules -> Add –>配置信息
- 选中 Request 和 Response
- Match
  - Name : Content-Type
  - Value : application/x-zip
- Replace
  - Name : Content-Type
  - Value : application/json;charset=UTF-8
- 选中 Replace All