前端 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


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


目录
相关文章
|
9月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
668 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
|
9月前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
498 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
10月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
875 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
存储 缓存 监控
|
10月前
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
551 1
|
JSON 前端开发 Java
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
文章介绍了Java后端如何使用Spring Boot框架响应不同格式的数据给前端,包括返回静态页面、数据、HTML代码片段、JSON对象、设置状态码和响应的Header。
578 2
震惊!图文并茂——Java后端如何响应不同格式的数据给前端(带源码)
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
116 18
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
211 2
|
前端开发 JavaScript API
前端Get请求能在body上传参吗
【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 下一篇
    oss云网关配置