Chrome DevTools Network 覆盖本地响应的调试方法

要在不改后端的情况下修改某个 XHR 或 fetch 响应，可以在 Chrome DevTools 的 Network 面板中对目标请求执行 Override content。DevTools 会把响应副本保存到授权的本地目录；刷新页面后，同一资源由本地修改文件提供。Local Overrides 启用时会自动禁用缓存。

官方说明：https://developer.chrome.com/docs/devtools/overrides

一、先确定最终验收结果

覆盖成功不能只看页面“似乎变了”。至少核对三项：Network 中目标请求仍能定位；Response 标签附近出现覆盖标记；刷新后响应正文与本地文件一致，页面进入预期状态。这样才能区分“本地响应生效”和“页面恰好命中其他缓存或测试数据”。

二、从 Network 创建本地覆盖

1. 打开目标页面和 DevTools，进入 Network。
2. 按 Fetch/XHR 类型过滤，触发一次页面操作，找到真正承载数据的请求。
3. 右键目标请求，选择 Override content。
4. 首次使用时选择一个专用本地目录，并点击 Allow 授权访问。
5. DevTools 会转到 Sources 下的 Overrides 文件，编辑内容后保存，再刷新页面。

建议为每个测试项目使用独立覆盖目录，不要选择包含真实源码、凭据或其他项目文件的宽泛目录。覆盖文件是调试资产，应能明确对应目标域名与请求路径。

三、修改 JSON 响应测试界面分支

例如原接口返回列表，可以把本地副本改成空列表、错误状态或边界值。JSON 本身不支持注释，编辑时必须保持语法有效；字段用途应记录在测试说明中，而不是向 JSON 中插入注释。

{
  "code": 0,
  "message": "ok",
  "data": {
    "items": [],
    "total": 0
  }
}

这个样例用于验收空状态：保存后刷新页面，应该出现空列表提示，而不是旧数据、加载动画或通用错误页。若前端还读取状态码、分页游标或嵌套字段，应按真实契约保留结构，只修改本次要测试的值。

四、用三层证据确认已经命中

五、覆盖没有生效怎么排查

1. 选错了请求

同一页面可能同时请求列表、统计和预加载数据。先清空 Network 记录，再执行一次最小用户动作，通过请求时序、Preview 和 Initiator 确认目标。

2. 本地覆盖被关闭

进入 Sources > Overrides，确认 Enable Local Overrides 已启用。需要暂时恢复真实网络响应时，取消该选项即可，无需删除文件。

3. URL 或重定向发生变化

覆盖按资源位置关联。环境域名、版本路径或重定向改变后，旧文件可能不再命中。以当前 Network 中的最终请求重新创建覆盖。

4. Service Worker 干预响应

如果页面由 Service Worker 提供资源，Network 的实际来源可能与预期不同。先确认请求的 Size、Initiator 与响应来源，再决定是否在测试环境临时绕开 Service Worker。

5. source-mapped 文件限制

官方文档说明，source-mapped 文件不能按普通内容覆盖；DevTools 会引导到原始源文件。对于 XHR/fetch JSON，通常直接覆盖响应副本即可。

六、结束调试与清理

完成测试后，先取消 Enable Local Overrides 并刷新，确认页面恢复真实响应。需要删除单个覆盖时，在 Sources > Overrides 中右键对应文件删除；删除操作不可撤销。团队复现问题时可以共享脱敏后的覆盖文件与测试说明，但不要把用户数据、令牌或内部接口响应加入版本库。

七、常见问题

1. Local Overrides 会修改服务器数据吗？

不会。它只在当前浏览器的本地调试环境替换响应，服务器和其他用户不受影响。

2. 可以同时覆盖响应头吗？

可以。Network 请求菜单还提供 Override headers，适合本地试验 CORS、Permissions-Policy 等响应头，但结论仍需在真实服务器配置中复核。

3. 为什么刷新后旧数据还在？

先确认 Response 是否已经是本地内容，再检查页面状态管理、IndexedDB、localStorage 或 Service Worker。响应已命中但 UI 未变化，通常属于前端状态没有重建。