chrome devtools本地覆盖功能可拦截并替换接口响应，实现零后端依赖调试：需先授权空文件夹读写权限，再对目标请求启用override content，最后编辑对应json文件并保存验证。
前端开发中后端接口尚未就绪、返回数据格式不稳定或需复现特定错误状态时，必须在不依赖真实服务的情况下验证前端逻辑——Chrome DevTools 的本地覆盖（Local Overrides）功能可直接拦截并替换指定请求的响应体，实现零后端依赖的精准调试。
启用本地覆盖功能并授权文件夹
这一步是整个流程的前提，未完成则后续所有操作均无效。Chrome 必须获得对本地文件夹的完整读写权限，否则无法生成或保存 .json 或 .headers 文件。
按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Opt+I（Mac）打开开发者工具 → 切换到 Sources 面板 → 在左侧边栏底部点击 Overrides 标签 → 点击 Select folder for overrides → 选择一个完全为空的文件夹（如桌面新建的 chrome-mock）。
系统弹窗出现后，必须点击 Allow 授予 Chrome 该文件夹的读写权限；若误点“拒绝”或关闭弹窗，需手动在系统设置中重置 Chrome 权限，否则后续编辑无法落盘。
确认 Overrides 标签下已显示所选文件夹路径，且其前复选框为勾选状态。
定位目标请求并启用内容覆写
只有对具体网络请求显式启用 Override content，Chrome 才会将该 URL 的响应体替换为本地编辑内容。未启用前，即使文件已存在也不会生效。
切换至 Network 面板 → 勾选 Preserve log → 刷新页面触发目标接口（如 /api/order/list）→ 在请求列表中找到该条目，确保其类型为 fetch 或 XHR，状态码为 200。
右键点击该请求 → 选择 Override content → 若为首次操作，DevTools 将自动跳转至 Sources > Overrides > Editor，并在所选文件夹中按请求路径创建对应文件（如 api/order/list.json）。
此时该请求右侧会出现紫色圆点图标，鼠标悬停显示 Saved.，即表示覆写已激活。
编辑并验证模拟响应数据
编辑器中默认为空白，需手动填入合法 JSON（或 XML、纯文本等），结构必须与原始接口一致，否则前端解析可能报错。
方法一：直接在 Sources > Overrides > Editor 中编辑
找到刚生成的 api/order/list.json 文件 → 输入标准 JSON 数据，例如：
{ "code": 0, "data": [{ "id": 1001, "status": "pending" }], "msg": "success" }
按 Ctrl+S（Windows/Linux）或 Cmd+S（Mac）强制保存；部分 Chrome 版本需此操作才能确保内容同步至磁盘，仅靠自动保存可能失效。
方法二：用外部编辑器修改（更推荐）
直接打开 chrome-mock 文件夹 → 进入对应子路径 → 用 VS Code 或记事本编辑 list.json → 保存后刷新页面即可生效。这种方式避免 DevTools 编辑器卡顿，也方便 Git 管理。
返回 Network 面板重新发起该请求 → 点击响应体（Response）标签 → 确认内容已更新为你填写的数据；若仍显示原始响应，请检查紫色圆点是否消失、文件路径是否与请求 URL 完全匹配（包括大小写和斜杠）、JSON 是否有语法错误。
临时禁用或彻底清除覆写配置
调试中途需快速比对真实接口行为，或完成验证后回归线上环境，必须主动干预覆写状态。
① 临时禁用：在 Sources > Overrides 面板中，取消勾选当前文件夹前的复选框 → 所有覆写立即失效，无需刷新页面，再次发起请求即走原始链路。
② 彻底清除：进入 chrome-mock 文件夹 → 删除对应请求路径下的全部文件（如 api/order/list.json 及可能存在的 list.json.headers）→ 返回 Overrides 面板，勾选文件夹复选框 → 刷新页面，该请求将不再被拦截。
注意：不要仅删除 .json 文件而遗漏 .headers 文件，否则响应头仍会被覆写，导致行为异常难以排查。
