技术分享1 分钟阅读
前端调试技巧：使用浏览器开发者工具修改网络响应内容
在前后端联调和测试过程中，有时需要修改接口响应数据来模拟特定场景。Chrome开发者工具的"替代内容(Overrides)"功能可以完美实现这一需求。下面是详细使用指南：
启用响应内容修改功能
•
打开Chrome开发者工具（F12或右键"检查"）
•
切换到"网络(Network)"面板
•
找到并点击"替代内容(Overrides)"选项卡
设置本地存储文件夹
•
首次使用时，点击顶部"选择文件夹"按钮
•
在弹出的对话框中选择一个已有文件夹或新建文件夹
Chrome需要获取该文件夹的读写权限
•
设置完成后会自动启用替代功能
修改特定请求的响应内容
•
在Network面板中找到需要修改的请求
•
右键点击该请求，选择"替代内容(Overrides) > 保存用于替代"
•
系统会自动跳转到"源(Sources)"面板并显示响应内容
•
直接编辑响应内容（支持JSON、HTML、JS等各种格式）
•
修改后按Ctrl+S保存更改
验证修改效果
•
刷新页面或重新触发该请求
•
在Network面板中检查该请求，响应内容应显示为已修改的版本
•
右上角会显示"替代内容已启用"的提示
注意事项
修改仅在本地生效，不会影响线上环境
关闭开发者工具后修改仍然会保留
如需禁用替代功能，可在Overrides面板中关闭开关
支持同时修改多个请求的响应内容
这个功能特别适合以下场景：
模拟后端返回的不同数据状态
测试前端对各种响应数据的处理能力
快速调试接口问题而无需等待后端配合
有关使用上的问题，欢迎您在底部评论区留言，一起交流~
读者评论
评论会同步写入该文在 Notion 中的页面底部（与正文同页，便于管理）。
暂无评论，欢迎抢沙发。