当前位置：首页 > news >正文

阶段二：AI手工测试2 Web/APP抓包：网络协议与抓包工具深度解析，测试执行的辅助技能

news 2026/7/6 13:35:47

1 网络资源和URL介绍

1.1 网络资源

1.2 URL介绍

2 网络传输协议

2.1 HTTP

2.1.1 http请求

2.1.1.1 请求行

2.1.1.2 请求头

2.1.1.3 请求体

2.1.2 响应

2.1.2.1 响应行

2.1.2.2 响应头

2.1.2.3 响应体

3 F12查看页面网络数据包

4 Charles抓取数据包

4.1 抓包

4.2 Charles

4.2.1 介绍

4.2.2 使用操作

4.2.2.1 浏览器设置代理

4.2.2.2 Charles开启代理

4.3 前后端bug定位

4.4 模拟弱网测试：模拟带宽比较低的网络测试延迟

4.5 异常数据测试：绕过界面直接测试服务器

5 抓取HTTPS的数据包

5.1 Web端抓HTTPS的数据包

5.2 手机端抓取HTTP的数据包

5.3 手机端抓取HTTPS的数据包

1 网络资源和URL介绍

1.1 网络资源

1、利用网络可以获取任何任何信息资源

eg：浏览器输入百度域名，就可以打开百度的首页

2、资源通过URL表示

1.2 URL介绍

1、URL：(Uniform Resource Locator)统一资源定位符，用来表示网络中资源存放的位置

2、URL的组成：

（1）协议（必）：按照什么规则通信的应用服务。用 :// 分隔
eg：HTTP（超文本传输协议，除了传输文字之外其他都能传输的一种）、HTTPS（加密的传输，访问网页一般默认转成https给你数据加密）
【扩展：传输文件有FTP，远程访问SSH】
（2）域名或主机（必）：访问的资源服务器的IP或域名。
eg：www.baidu.com
www表示万维网（即互联网），jd表示指定某一个服务器，com代表是一个商业还是什么类型的，为了人好记才发明的域名
IP地址和域名的关系：计算机之间互相通讯只认IP地址（IP：xxx.xxx.xxx.xxx），代表计算机在网络中的位置
域名的背后对应唯一的IP地址：即www.baidu.com对应唯一的IP地址，通过翻译者DNS来进行翻译
（3）端口（必）：标识特定的应用程序/服务，程序通信的出入口。一般浏览器访问的时候不显示端口号
eg：HTTP默认端口80（:80），HTTPS默认端口443（:443）
端口一般和提供的服务有关，通常是数据通信相关的服务：web服务（本质上是web服务对应的软件系统）

（4）资源路径（可选）：存放的具体路径，用 / 进行分隔
（5）查询参数（可选）：请求携带的参数。通过？进行分隔，多个参数之间通过&符号连接（参数名=参数值）

eg：https://www.baidu.com

①一般使用默认的端口号（:443）且不显示 ②找到html的文件 ③用？分隔查询参数q=手机

3、URL表示形式：

协议://hostname[:port]/path/[?查询参数1&查询参数2]

2 网络传输协议

1、协议：网络中数据传输遵循的规则

常见协议：HTTP/HTTPS、SSH、FTP等

2.1 HTTP

1、HTTP(Hyper Text Transfer Protocol)：超文本传输协议（超越文字和数字，一般指代图、视频、音频、动画），网络中传输类似于网页类型的文档的协议

2、HTTP访问过程

①HTTP请求：请求行、请求头、请求体

②HTTP响应：响应行、响应头、响应体

3、http请求

①请求行：请求数据包的第一行内容

②请求头：从第二行到空行之间内容

③请求体：空行下方的内容

4、http响应

①响应行：响应数据包第一行内容

②响应头：从第二行开的到空行之间内容

③响应体：空行下方的内容

2.1.1 http请求

2.1.1.1 请求行

1、位置：HTTP请求的第一行

2、作用：描述请求的方法、URL、协议版本信息

3、请求方法作用：按照什么方式操作资源

4、常见的HTTP请求方法：

①GET：从服务器获取资源（查）
②POST：在服务器新建一个资源（增）
③PUT：在服务器更新资源（改）
④DELETE：从服务器删除资源（删）

2.1.1.2 请求头

1、位置：HTTP请求的第二行到空行之间

2、作用：描述请求客户端的属性信息（我是啥啥啥服务器给你发的内容是啥类型）

3、请求头的Content-Type（内容类型）：表示请求体里数据的数据类型，即表示给服务器发消息带了什么样的数据（可以看到页面的数据类型）

text/html：HTML格式
text/plain：纯文本格式
image/jpeg：jpg图片格式
application/json：JSON数据格式（键值对）
application/x-www-form-urlencoded：表单默认的提交数据格式（页面的输入块、单选框、复选框叫表单）
multipart/form-data：表单中进行文件上传时使用

2.1.1.3 请求体

1、位置：空行下面的内容

2、作用：描述请求携带的数据

3、请求体：

表示传输的数据（不是所有方法都带）；
只有在post和put方法中使用，配合请求头Content-Type（可以看到页面具体写的数据是啥）

2.1.2 响应

2.1.2.1 响应行

1、位置：HTTP响应的第一行

2、作用：描述服务器的处理结果

3、常见响应状态码（三位数字组成）：

①2xx：成功（资源访问一定能成功）
②3xx：重定向（资源访问可能成功也可能失败，见得少）
重定向：表示第一次请求中资源位置发生变化，服务器发现客户端用旧的位置找服务器，服务器给客户端回一个新的地址，让客户端用新地址找服务要，所以又来进行第二次请求
eg：比如原来文件在d盘放，现在挪到e盘，你还找我在d盘要，我告诉你位置发生变化了（生成响应状态码），客户端会自动拿我给你的一个新的地址重新给我发送一次请求
③4xx：客户端错误（资源访问一定失败）
客户端发送的数据有问题，在请求里的行、头、体出现任何一个错误都有可能出现开头的响应状态码
④5xx：服务器错误（资源访问一定失败）
eg：比如客户端找服务器要资料，服务器这会处理不了，就会回一个5开头的信息

常见的HTTP响应状态码：

eg：协议版本+状态码200+结果描述OK

2.1.2.2 响应头

1、位置：HTTP响应第二行到空白行

2、作用：描述服务器属性信息（比如客户端你好，我是什么什么服务器，我给你回的是什么类型的消息）

3、组成：由键值对组成

2.1.2.3 响应体

1、位置：HTTP响应空白行以下

2、作用：服务器返回的数据

3、数据类型：有图片、json（"键":值）、HTML（设计前端的源代码）、xml等

3 F12查看页面网络数据包

1、F12抓取指定的URL的登录接口，获取HTTP请求数据

标头：主要看行和头
负载：请求体的东西
响应：响应体的东西

2、把上一个数据包清空，再进行操作获取新的数据包

4 Charles抓取数据包

4.1 抓包

1、抓包（packet capture）：使用工具抓取客户端与服务器交互数据包（也称传输信息、报文）的操作，即在客户端和服务端之间设置网络代理，抓取客户端和服务端之间传输的数据信息

2、常见抓包工具：F12（浏览器），Charles（支持Windows、Mac、Linux），Fiddler（主要针对Windows）、wireshark（网卡、数据链路层，更专业计算机网络）等

3、为啥抓包？【场景】

定位前后端bug（最常见）
模拟弱网测试（抓包工具模拟网络信号弱的场景下进行测试）
绕过界面限制进行测试，即绕过界面做后端接口测试【页面级别的异常数据】（页面的数据前端做了限制，要确保后台是否有限制，所以需要做）
模拟服务端进行mock测试【接口测试阶段会有】

4、如何区分前后端bug？

①如果抓不到请求或请求有误是前端问题；
②如果有请求且正确但是没响应或者响应错误，那就是后端的问题；
③如果抓包有请求也有响应且都正确，但是页面显示还是报错了，则还是前端问题（页面渲染）。

5、怎么抓包

web为例：

浏览器设置网络代理：安装了抓包工具的电脑IP
打开抓包工具开启抓包，操作浏览器，最后获取抓取的数据包

4.2 Charles

4.2.1 介绍

1、Charles基本信息：

Charles是一款在Windows/Mac下常用的数据包截取工具，支持Web/APP端网络数据包的抓取分析。

中文名叫青花瓷，它是一款基于HTTP协议的代理服务器，通过成为电脑或者浏览器的代理，然后截取请求和请求结果达到分析抓包的目的。

2、抓包原理：在客户端和服务端之间设置网络代理

3、官方下载地址:https://www.charlesproxy.com/（30天免费试用）

4.2.2 使用操作

建议：以Firefox浏览为主

4.2.2.1 浏览器设置代理

1、在浏览器设置代理，Charles默认端口8888（只有安装时做一次，以后都不用做）

2、关闭Charles后不能打开网页

3、启动Charles后能够打开网页

4.2.2.2 Charles开启代理

1、检查是否开启HTTP代理（没有开启的话，勾选确定即可）

2、打开已设置过代理的浏览器去访问地址，就可以直接抓包了（建议先用以下地址访问）

eg：

搜索列表http://hmshop-test.itheima.net/Home/Goods/search.html?q=手机

传智播客传智播客http://121.43.169.97:8081/3、打开Charles

左侧：

右侧：

4.3 前后端bug定位

1、为啥抓包可以定位bug？

后台有数据库服务，页面的信息都在数据库，后台给数据给错，页面没问题，后台给对，放页面是错的

2、定位bug的思路：

①确认请求是否有问题，请求有问题-->是前端
②确认响应是否有问题，响应有问题-->是前端
注意：如何确定响应的问题？
看返回的数据和数据库是否一致，一致-->则响应没问题，不一致-->则响应有问题
③请求和响应都没问题，但页面显示错-->前端

eg：

（1）定位该bug的步骤：

①通过浏览器访问地址去工具上看是否能抓到数据包

②性别是个人信息，登录成功才能看到个人信息，所有确定要抓登录的包

③看请求，找登录的包看请求体是否和页面数据一样，如果输入的和抓到的数据一样说明请求的数据没错

④看响应，借助数据库看响应体（响应体里有后台给的性别信息），发现和响应体的数据一样

⑤综上，那就是前端的bug（请求没问题，响应没问题，那就是前端渲染的问题）

（2）如果请求的数据和页面输入的数据不一样（发送的时候就已经错了），那是谁的问题？
答：前端

（3）如果后台返回的数据和数据库里的不一样，那是谁的问题？
答：后端

4.4 模拟弱网测试：模拟带宽比较低的网络测试延迟

1、弱网延时和带宽设置-->模拟不同网络

2、参数设置：

①设置网络带宽
②操作对应页面/APP应用
③Charles查看延迟时间/趋势变化
④确认应用程序是否有异常

上行：往外传
下载：往内传
存储数据：Byte 字节
传输数据：bit 比特位
1GB=1024MB 1MB=1024KB 1KB=1024Byte 1Byte=8bit
bit/s=bps（bit per second）
1000Mbps=1000/8MBps=125MB/s

3、具体测试步骤：

①不开启弱网，用正常网络访问页面，抓取对应数据包查看传输时间【Duration】
②设置好弱网参数后，开启弱网，再次访问上述同一页面，抓取对应数据包查看传输时间
③对比两次访问的【Duration】实现变化，弱网情况下有延迟，且页面不能出现崩溃
规则判断：以产品要求提供的数据为准
eg：某电商系统首页进入在3G网络下8s完成，且页面不出现无响应、崩溃等问题视为通过

eg：弱网后发现时间拉长了

需求：模拟3G网络带宽，访问tpshop首页，查看延时多少?是否有异常?

一个根目录表示一个页面，第二个根目录表示第二个页面

4.5 异常数据测试：绕过界面直接测试服务器

1、本质：测服务器的接口

2、假设页面做拦截校验了，测试接口有没有做校验

3、详细操作步骤：

eg：购物车商品数量有上限200的限制，页面无法输入201（说明页面进行校验了，不代表接口做拦截校验了），可以绕过页面做服务端测试

设置：

（1）打开浏览器输入待测地址

（2）在Charles的 Proxy-->Breakpoints（设置断点）：

勾选:Enable Breakpoints
点击:Add添加设置断点的URL信息（可设置：'protocol'、'host'、'request'、'response'）

（3）确认：设置完成后点击OK

（4）在浏览器模拟用户进行操作测试（保证打开当前页面并打开断点）

（5）Charles开始抓取到当前数据包并闪烁提示（红色向上箭头表示拦截到数据包）

（6）在Charles的Breakpoints 修改请求的数据-->点击Execute

（7）在Charles的Breakpoints修改响应的数据-->点击Execute(注:可跳过修改响应，直接执行)

（8）弹出的断点数据包含一路Execute执行完毕最后点击关闭断点按钮

示例结果：

①前端按钮做限制，输入块没做限制

②前端不考虑则绕过前端，通过断点拦截前端，后端也没做校验说修改成功

5 抓取HTTPS的数据包

HTTPS：安全超文本传输协议

5.1 Web端抓HTTPS的数据包

注意：一定要安装证书才可以，https属于加密传输

5.2 手机端抓取HTTP的数据包

1、注意：

移动端抓包的前提，代理服务器必须和移动端设备在一个局域网

一般通过连接同一个WiFi解决（与安装了Charles代码的电脑，手机接入同一热点即可）（不能用移动网络抓，难以控制中间的路由）

2、具体步骤

（1）手机端WiFi设置：给手机连接的WiFi设置代理，填入安装了Charles的电脑的IP地址（IPv4地址），端口号一般是8888，然后保存

（2）操作手机APP/打开手机浏览器访问显示抓包信息【抓取http的数据包】

5.3 手机端抓取HTTPS的数据包

注意：
1、移动端设备如果是Android 7.0及以上版本（做了安全处理），需要root权限安装Charles证书
参考资料:https://cloud.tencent.com/developer/article/1490033
2、移动端设备如果是iOS 10.0及以上版本，需要在设置-通用-关于里面开启Charles证书信任
如果iOS手机设置证书信任后不生效，可以重启手机重试一遍

1、Android手机安装Charles证书

（1）下载Charles证书到本地电脑

（2）以hash值的形式重命名证书（为了证书能够安装到系统下使用）