password
查看人数
type
status
date
slug
summary
category
icon
tags
作者
状态
😀
在前后端联调和测试过程中，有时需要修改接口响应数据来模拟特定场景。Chrome开发者工具的"替代内容(Overrides)"功能可以完美实现这一需求。下面是详细使用指南：
 

启用响应内容修改功能

  1. 打开Chrome开发者工具（F12或右键"检查"）
  1. 切换到"网络(Network)"面板
  1. 找到并点击"替代内容(Overrides)"选项卡
      2. notion image

设置本地存储文件夹

  1. 首次使用时，点击顶部"选择文件夹"按钮
  1. 在弹出的对话框中选择一个已有文件夹或新建文件夹
      • Chrome需要获取该文件夹的读写权限
  1. 设置完成后会自动启用替代功能
      2. notion image

修改特定请求的响应内容

  1. 在Network面板中找到需要修改的请求
  1. 右键点击该请求，选择"替代内容(Overrides) > 保存用于替代"
  1. 系统会自动跳转到"源(Sources)"面板并显示响应内容
  1. 直接编辑响应内容（支持JSON、HTML、JS等各种格式）
  1. 修改后按Ctrl+S保存更改

验证修改效果

  1. 刷新页面或重新触发该请求
  1. 在Network面板中检查该请求，响应内容应显示为已修改的版本
  1. 右上角会显示"替代内容已启用"的提示
      2. notion image

注意事项

  • 修改仅在本地生效，不会影响线上环境
  • 关闭开发者工具后修改仍然会保留
  • 如需禁用替代功能，可在Overrides面板中关闭开关
  • 支持同时修改多个请求的响应内容
这个功能特别适合以下场景：
  • 模拟后端返回的不同数据状态
  • 测试前端对各种响应数据的处理能力
  • 快速调试接口问题而无需等待后端配合
notion image
 
💡
有关使用上的问题，欢迎您在底部评论区留言，一起交流~
 
相关文章
搜索引擎屏蔽CSDN，还你干净收索结果
ubuntu 使用wine中安装微信
通过IP获取用户位置、时区、经纬度等信息
linux qbittorrent-nox搭建
claude2 个人调试版
codesandbox 环境变量获取
fastapi 添加/docs api文档中全局token
Loading...