【功能测试】6_Web端抓包 _Fiddler抓包工具的应用

文章目录

  • 一、抓包说明
    • [1.1 抓包](#1.1 抓包)
    • [1.2 抓包原理](#1.2 抓包原理)
    • [1.3 抓包工具的应用场景](#1.3 抓包工具的应用场景)
    • [1.4 如何定位Bug是前端还是后端的?](#1.4 如何定位Bug是前端还是后端的?)
  • 二、Fiddler抓包工具的使用
    • [2.1 抓包操作](#2.1 抓包操作)
    • [2.2 设置过滤](#2.2 设置过滤)
    • [2.3 安装证书](#2.3 安装证书)
    • [2.4 弱网设置](#2.4 弱网设置)
      • [2.4.1 弱网环境下可能会出现的异常](#2.4.1 弱网环境下可能会出现的异常)
      • [2.4.2 弱网测试步骤(重点)](#2.4.2 弱网测试步骤(重点))
      • [2.4.3 弱网延迟计算](#2.4.3 弱网延迟计算)
    • [2.5 断点设置](#2.5 断点设置)
      • [2.5.1 为什么要设置断点?](#2.5.1 为什么要设置断点?)
      • [2.5.2 断点操作步骤](#2.5.2 断点操作步骤)
        • [2.5.2.1 断点请求](#2.5.2.1 断点请求)
        • [2.5.2.2 断点响应](#2.5.2.2 断点响应)

一、抓包说明

1.1 抓包

说明:客户端向服务器发送请求以及服务器响应客户端的请求,都是以 数据包 来传递的。

抓包(packet capture):通过工具拦截客户端与服务器交互的数据包

1.2 抓包原理

抓包工具(fiddler):Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯。

yacas 复制代码
1、使用抓包工具开启代理服务(转发请求与响应)
2、将浏览器上网方式设置成通过代理上网(将请求发给抓包代理服务器)

1.3 抓包工具的应用场景

1.定位前后端Bug

2.弱网测试

3.绕过界面限制直接测试服务器

1.4 如何定位Bug是前端还是后端的?

① 如果抓不到请求,显然是前端问题。

② 如果有请求但是没响应,那就是后端的问题;

③ 如果有请求也有响应,需要查看响应信息, 如果返回报错了,则需要具体分析报错内容。

二、Fiddler抓包工具的使用

2.1 抓包操作

Fiddler只抓包操作,不需要任何设置。因为默认开启了代理 8888。(谷歌浏览器也不需要手工设置)

2.2 设置过滤

yacas 复制代码
为什么要过滤?
------抓包时,有很多其他请求,干扰太大,可以使用过滤只看被测项目相关信息。

第一步:Filters菜单--->勾选Use Filters

第二步: 在第二个下拉框中选择Show only the following Hosts,并输入目标hosts

第三步:Actions--->Run Filterset Now立即执 行

2.3 安装证书

yacas 复制代码
为什么要安装证书?
------抓取https协议的包。(带锁看不着,装证书就是解决带锁的问题)

2.4 弱网设置

2.4.1 弱网环境下可能会出现的异常

  • 上传文件时进度卡住不动
  • 登录不上或者登录后立即掉线
  • 响应过程中页面控件可点击,导致崩溃
  • 搜索不响应,多次点击后结果显示总在刷新被替换

2.4.2 弱网测试步骤(重点)

弱网测试目标:项目使用用户有不同的网络环境,需要验证在网络环境较差的情况,能正常使用项目。

yacas 复制代码
1.设置要模拟的网络速度
2.开启网络延时
3.测试项目

1、设置要模拟的网络速度

2、开启网络延时

3、测试项目

yacas 复制代码
注:测试完成后需恢复设置
------查看弱网执行时间

2.4.3 弱网延迟计算

yacas 复制代码
弱网延迟时间计算公式:
延时ms=[1KB/(速率bps/8)B/s]*1000  单位换算关系:(B:字节	b:位)

1B = 8b
1B/s = 8b/s(或1Bps=8bps)
1KB = 1024B
1KB/s = 1024B/s
1MB = 1024KB
1MB/s = 1024KB/s
1Mbps=1000 000bps
1M带宽:速率为1Mbps
1s = 1000ms

2.5 断点设置

2.5.1 为什么要设置断点?

yacas 复制代码
绕开前端js限制,直接测试服务端。

2.5.2 断点操作步骤

yacas 复制代码
1.设置断点
2.修改请求
3.修改响应
2.5.2.1 断点请求
yacas 复制代码
1、启动Fiddler
2、打开tpshop登录页面,输入账号、密码、验证码
3、设置请求断点
4、在请求中把手机号删除
5、点击 Run to Completion (所有页面都要释放)


2.5.2.2 断点响应
yacas 复制代码
1、启动Fiddler
2、打开tpshop登录页面,输入账号、密码、和错误的验证码
3、设置响应断点
4、在响应中修改 哈哈,登录成功了!!!
5、点击 Run to Completion 



相关推荐
前端摸鱼匠16 小时前
Vue 3 的v-bind合并行为:讲解v-bind与普通属性合并的规则
前端·javascript·vue.js·前端框架·ecmascript
REDcker17 小时前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
donecoding18 小时前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复
前端·node.js·前端工程化
风骏时光牛马18 小时前
Raku正则匹配与数据批量处理实操案例
前端
nbwenren18 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
Lee川18 小时前
Prisma 实战指南:像搭积木一样设计古诗词数据库
前端·数据库·后端
jinanwuhuaguo19 小时前
(第二十九篇)OpenClaw 实时与具身的跃迁——从异步孤岛到数字世界的“原住民”
前端·网络·人工智能·重构·openclaw
广州华水科技19 小时前
深度测评2026年单北斗GNSS位移监测系统推荐,与高口碑变形监测设备一同引领行业新风尚
前端
Alice-YUE19 小时前
【js高频八股】防抖与节流
开发语言·前端·javascript·笔记·学习·ecmascript