前端 Fiddler 抓包修改请求响应结果

简介: 实际前端开发中,对接线上发布的后端接口,由于业务比较复杂,也设计到以前的库表,开发过程经常会出现部分页面数据不完整,无法对接整个流程,日常前端开发也有其他方式实现功能测试验证。

616eb2b6346d5b3555f50431dd5fb0a6.jpg


为什么要用 Fiddler 抓包修改请求响应结果


实际前端开发中,对接线上发布的后端接口,由于业务比较复杂,也设计到以前的库表,开发过程经常会出现部分页面数据不完整,无法对接整个流程,日常前端开发也有其他方式实现功能测试验证:


  1. 前端Mock整个项目API接口数据,如果项目在一开始就没有使用Mock Server的话,对于中后期的开发过程再去Mock数据的情况下不现实,需要把之前的某些数据也模拟出来,太耗时费力,开发进度时间上也不允许。


  1. 前端开发人员基于后端文档写好纯前端页面及逻辑功能后,找后端造数据,后端同学有时候忙或者配合默契度不高,沟通对接成本高


  1. 前端连接数据库,修改数据库数据,目前做的这个项目,部分前端没有连接数据库的权限,前端去做还需要了解整个库表的结构设计及功能,对于业务复杂性周期长的项目,文档不完善,部分后端开发人员都不清楚哪个库表是干什么的,前端去做这个部分数据的模拟,沟通成本和实现难度更高。


  1. 通过网络代理拦截接口返回的数据进行修改。成本低,可以随时测试前端功能验证功能,配置一下相关工具即可。


下面介绍使用 Fiddler 抓包工具修改 Response 返回结果。


官网下载安装 Fiddler


Win11 系统本地安装版本


v5.0.20204.45441 for .NET 4.6.1
Built: 2020年11月3日
64-bit AMD64, VM: 69.0mb, WS: 133.0mb
.NET 4.8 WinNT 10.0.22000.0


启动 Fiddler


Fiddler 默认会抓包所有请求,这时候需要先过滤一下,方便抓包项目中的请求的接口,如目前的项目中本地请求的内网地址为 http://10.255.52.93:8080


过滤请求


Filters  勾选 Use Filters, 在 Hosts 中选择 Show only Internet HostsShow only the following Hosts, 在输入框中输入要过滤的 IP 和端口,如:10.255.52.93:8080 ,点击 Actions -> Run Filterset now


fc63ba1665b02517a3b00d4381077bb4.png

fiddler 过滤.png


如果侧边栏只有当前过滤的API请求,说明配置成功了


b2e249324c3ea33a2549a35fbd11bedc.png

请求参数响应结果.png


注意


如果出现 Fiddler 抓包抓不到的情况,检查一下电脑上是不是启动了其他的代理工具,如 FQ 等工具会影响 Fiddler 的正常抓包功能,可以把其他代理工具关了试试


断点捕获数据


菜单栏选择 Rules -> Automatic Breakpoints -> After Responses ,这时候重新刷新页面,或点击页面某个操作按钮,重新发起请求,这时 Fiddler 请求会出现拦截,此时页面属于卡住状态,请求栏拦截的请求出现红色图标,点击拦截的请求,右侧区域会有 Breakpoint hit. Tamper,then: 状态栏,此时请求响应内容在 TextView 中可以修改的,修改完对应的数据后,点击 Run to Completion 按钮结束,这时候页面的数据显示的就是修改后的数据了。


97d297db6afc83802a0085111289d4c1.png

image.gif断点设置.png


这时候前端开发人员就可以按需修改对应的请求结果,调试前端功能测试完整流程了。


目录
相关文章
|
3月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
29天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
37 18
|
1月前
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
133 1
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
24天前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
1月前
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。
|
1月前
|
存储 缓存 监控
|
1月前
|
移动开发 前端开发 HTML5
SharedWorker 优化前端轮询请求
【10月更文挑战第6天】
22 1
|
1月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
78 0
|
3月前
|
前端开发 JavaScript 开发者
|
3月前
|
开发者 图形学 API
从零起步,深度揭秘:运用Unity引擎及网络编程技术,一步步搭建属于你的实时多人在线对战游戏平台——详尽指南与实战代码解析,带你轻松掌握网络化游戏开发的核心要领与最佳实践路径
【8月更文挑战第31天】构建实时多人对战平台是技术与创意的结合。本文使用成熟的Unity游戏开发引擎,从零开始指导读者搭建简单的实时对战平台。内容涵盖网络架构设计、Unity网络API应用及客户端与服务器通信。首先,创建新项目并选择适合多人游戏的模板,使用推荐的网络传输层。接着,定义基本玩法,如2D多人射击游戏,创建角色预制件并添加Rigidbody2D组件。然后,引入网络身份组件以同步对象状态。通过示例代码展示玩家控制逻辑,包括移动和发射子弹功能。最后,设置服务器端逻辑,处理客户端连接和断开。本文帮助读者掌握构建Unity多人对战平台的核心知识,为进一步开发打下基础。
120 0