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

浏览器修改后端返回值

模拟接口响应和网页内容
通过本地覆盖可以模拟接口返回值和响应头,无需 mock 数据工具,比如(Requestly),无需等待后端支持,快速复现在一些数据下的 BUG 等。在 DevTools 可以直接修改你想要的 Fetch/XHR 接口数据,还可以修改响应头,解决跨域等问题,不仅可以覆盖 Fetch/XHR,JS、CSS 等资源也可以。
本地覆盖其实在之前的版本就已经有了,需要在本地手动创建目录,步骤麻烦。Chrome 117 对本地覆盖功能简化,现在可以直接在 Network 面板快速模拟远程资源的内容和响应头!

设置本地覆盖步骤:

  1. 打开 DevTools,导航至 Network 网络面板,右键单击要覆盖的请求,从下拉菜单中选择 Override content 或 Open in Sources panel。
    在这里插入图片描述

如果是首次使用,未设置过本地覆盖文件目录,DevTools 会在顶部的操作栏中提示您选择一个文件夹来存储覆盖文件,并 “允许” 授予 DevTools 对其的访问权限(在 window 下选择了系统盘的文件夹测试发现用不了,可能是权限问题,建议选个非系统盘的文件夹)。

  1. 在 Sources 面板中修改数据,完成后按 Ctrl + S 保存,刷新页面,即可看见修改后的数据(被覆盖的资源在图标右下角会有个紫色的圆点)。
    在这里插入图片描述

  2. 若要恢复使用服务上的数据,请导航到 Sources > Overrides,可以点击取消 “Enable local overrides” 复选框,或者点击旁边的 Clear 图标,或者如上图演示中的单个删除。

  3. 工作原理
    当你在 DevTools 中进行更改时,DevTools 会将修改后的文件的副本保存到您指定的文件夹中。当你重新加载页面时,DevTools 会提供本地修改后的文件,而不是网络资源。所以在旧版本支持 Override 的版本中,也可以手动创建一个文件来覆盖内容。

相关文章:

  • NKCTF 2024 webshell_pro
  • CI/CD:持续集成/持续部署
  • java web爬虫
  • 【OpenHarmony】TypeScript 语法 ③ ( 条件语句 | if else 语句 | switch case 语句 )
  • [数据集][目标检测]老鼠检测数据集VOC+YOLO格式4107张1类别
  • 反激电源压敏电阻设计
  • Python Config 用法:探索配置文件的艺术
  • 基于 IP 的 DDOS 攻击实验
  • 3.基础光照
  • 进程间通信(27000字超详解)
  • 领域建模(系统操作复习)
  • Prime1 - 提权的另一种解法,彻底搞懂OpenSSL解密渗透提权,超强思路版。
  • leetcode155. 最小栈
  • Photoshop 首选项设置建议
  • React框架的快速入门
  • 【编码】-360实习笔试编程题(二)-2016.03.29
  • Angular 2 DI - IoC DI - 1
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • Magento 1.x 中文订单打印乱码
  • vue的全局变量和全局拦截请求器
  • Zsh 开发指南(第十四篇 文件读写)
  • 工作手记之html2canvas使用概述
  • 汉诺塔算法
  • 类orAPI - 收藏集 - 掘金
  • 小程序测试方案初探
  • 以太坊客户端Geth命令参数详解
  • 硬币翻转问题,区间操作
  • 在 Chrome DevTools 中调试 JavaScript 入门
  • 在electron中实现跨域请求,无需更改服务器端设置
  • mysql 慢查询分析工具:pt-query-digest 在mac 上的安装使用 ...
  • #define用法
  • #考研#计算机文化知识1(局域网及网络互联)
  • (1综述)从零开始的嵌入式图像图像处理(PI+QT+OpenCV)实战演练
  • (4.10~4.16)
  • (C#)if (this == null)?你在逗我,this 怎么可能为 null!用 IL 编译和反编译看穿一切
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (二十一)devops持续集成开发——使用jenkins的Docker Pipeline插件完成docker项目的pipeline流水线发布
  • (二刷)代码随想录第16天|104.二叉树的最大深度 559.n叉树的最大深度● 111.二叉树的最小深度● 222.完全二叉树的节点个数
  • (附源码)springboot宠物医疗服务网站 毕业设计688413
  • (几何:六边形面积)编写程序,提示用户输入六边形的边长,然后显示它的面积。
  • (三)elasticsearch 源码之启动流程分析
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (转)母版页和相对路径
  • .Net CoreRabbitMQ消息存储可靠机制
  • .net生成的类,跨工程调用显示注释
  • .vollhavhelp-V-XXXXXXXX勒索病毒的最新威胁:如何恢复您的数据?
  • @param注解什么意思_9000字,通俗易懂的讲解下Java注解
  • [ C++ ] 类和对象( 下 )
  • [ 转载 ] SharePoint 资料
  • [.net 面向对象程序设计进阶] (19) 异步(Asynchronous) 使用异步创建快速响应和可伸缩性的应用程序...
  • [10] CUDA程序性能的提升 与 流
  • [AIGC] Java 和 Kotlin 的区别
  • [Angular 基础] - 数据绑定(databinding)
  • [CSS] - 修正IE6不支持position:fixed的bug