Chrome DevTools 怎样临时覆盖本地页面资源

Chrome DevTools 的 Local Overrides 可以把页面资源保存到指定目录，在本机调试时用修改后的副本替代原响应，刷新后仍可继续使用。先授权一个专用覆盖目录，再从 Network 为目标资源选择 Override content、修改并保存即可。这里的“临时”是可随时停用，不代表刷新页面就自动消失。

官方地址：https://developer.chrome.com/docs/devtools/overrides/。下面假设你已有自己维护的本地 HTTP 测试页面，页面通过普通外链 theme.css 加载样式，文件中没有 source map 映射。只在有权调试的页面使用。本篇不修改响应头，也不讲服务器部署；配图均为原创界面说明图，不是浏览器截图或实际操作记录。

1. 绑定专用Overrides目录

先在电脑上准备一个空的演示目录，例如 devtools-overrides-demo，不要直接授权整个主目录，也不要把覆盖目录与项目源码目录混放。覆盖副本与源码分开，后面才能分清“本地看到的变化”究竟保存在哪里。

在 Chrome 打开本地测试页，使用菜单 更多工具 → 开发者工具，进入 Network。保持 DevTools 打开并刷新测试页，找到 theme.css 请求，右键选择 Override content。没有配置过覆盖目录时，按顶部提示选择刚准备的目录，再点击 Allow 授予访问权限。

设置完成后，DevTools 会进入内容编辑位置。再到 Sources → Overrides 查看该目录，并确认 Enable Local Overrides 已启用。不同语言界面的文字可能翻译不同，以上英文名称可用于对照。

完成状态：Sources 的 Overrides 分区能看到已选目录与保存的目标资源，而不是只有一个待授权提示。若之前已有覆盖目录，先辨认是否属于其他调试任务，不要为了这个例子清空旧目录。

2. 把CSS响应保存成本地覆盖文件

在 Sources → Overrides 展开的资源树中打开刚保存的 theme.css。确认它对应 Network 中的目标请求，而不是同名但属于其他地址的文件。不要随意改动资源树的目录层级；覆盖关系需要与请求资源对应。

假设你的演示页存在 class="demo-banner" 元素，在这个 CSS 文件末尾追加下面的独立规则，再按 Ctrl+S（macOS 为 Command+S）保存。只追加演示类，不替换整份已有样式，方便停止试验时区分改动。

/* 只改变演示横幅，便于辨认覆盖副本是否被使用 */
.demo-banner {
  background-color: #e6f4ff;
  border: 2px solid #1769aa;
}

完成状态：文件保存后，Overrides 列表中有这个覆盖文件，编辑器不再保留未保存标记。此时得到的是覆盖目录里的副本；项目中原来的 CSS 并没有因为这次保存而自动更新。

如果当前资源带有 source map，选择 Override content 可能被引导到原始源文件，并不能按这里的普通文件路径直接覆盖。先改用独立的无映射演示 CSS 学习流程，不要把编译产物与源码两份文件同时改动来碰运气。

3. 刷新观察并停用覆盖

保持 DevTools 打开，刷新测试页面。到 Network → theme.css → Response 查看响应内容，确认能找到追加的演示规则；覆盖内容对应的 Response 标签旁会有紫色标记。再回到页面观察横幅的浅蓝背景和边框。

页面外观不是唯一依据：如果 CSS 选择器没有匹配元素，或被其他更高优先级样式盖住，覆盖响应可能已经生效，但外观仍不变。因此先确认请求和响应，再确认样式适用范围，不要直接把“没变色”当成目录绑定失败。

完成体验后，进入 Sources → Overrides，取消勾选 Enable Local Overrides，随后刷新页面。这会停用本地覆盖，保留副本供以后继续编辑。对未改过源码、且页面没有其他变化的演示例子，追加规则不应再来自覆盖副本。

完成状态：启用时能辨认覆盖响应，停用并刷新后能回到原响应。这里描述的是读者执行时应观察的状态，并非本文已经运行过的结果。

不要把 Clear 或文件右键 Delete 当作单纯开关。删除会移除覆盖文件，官方文档明确提示该操作不能撤销。需要保留实验内容时先备份专用目录，只想暂时恢复页面则优先取消启用。

Overrides和Workspaces都要绑定吗？

不需要为了这次覆盖再绑定源码工作区。Workspaces 面向把修改保存回本地源文件；Overrides 面向响应副本。若目标只是对比一处外观，两者混用会让文件归属不清楚。

为什么启用后缓存行为不一样？

Local Overrides 启用时会禁用缓存。不要用这个调试状态直接推断正常用户的缓存命中或页面性能；结束试验后停用，再回到常规环境观察。

复制覆盖目录能代替发布吗？

不能。副本只是调试材料，其他用户不会因为你本机保存了它就获得修改。确定采用的改动仍应手动整理回项目源码，经过项目自己的流程交付。

参考 Chrome 官方 Overrides 文档：https://developer.chrome.com/docs/devtools/overrides/；源码工作区区别：https://developer.chrome.com/docs/devtools/workspaces/。