正确配置 Chrome 的 Overrides 功能，需掌握以下关键节点：

• 在 Sources 面板启用 Overrides 并授权本地文件夹读写权限。
• 右键目标资源选择“Save for overrides”建立本地映射。
• 编辑完成后刷新页面验证效果是否生效。
• 通过 Network 面板右键接口选择“Override content”实现接口 Mock。
• 务必确保协议为 http 或 https，因为 file:// 访问被禁用。

很多时候，我们需要在不改动服务器代码的前提下，对线上网页的 HTML、CSS 或 JavaScript 文件进行临时修改并持久化保存。

如果操作不成功，大概率是因为 Chrome 浏览器的 Overrides 功能没有正确配置或根本没有启用。

下面把实现目标的具体步骤拆开细说。

一、配置 Overrides 本地文件夹并授权读写权限

Overrides 功能要把修改内容写到本地磁盘，必须指定一个专用文件夹，并给 Chrome 对该路径的完整访问权限。

这一步没做对，后面所有覆盖操作都触发不了文件写入。

1. 按下 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（Mac）打开开发者工具。
2. 切换到 Sources 面板，在左侧边栏底部找到 Overrides 标签。
3. 点击 Select folder for overrides，选择一个空文件夹，比如在桌面新建一个叫 chrome-overrides 的文件夹。
4. 在系统弹出的权限窗口中，点击 Allow，授权 Chrome 对该文件夹的读写权限。
5. 确认这个文件夹已出现在 Overrides 标签下，且前面的复选框处于勾选状态。

二、映射目标网页资源到本地覆盖路径

只配置好文件夹还不够，不会自动关联网页上的资源。必须对具体文件显式执行“保存为覆盖”。

这样 Chrome 才会在本地文件夹中创建对应路径的副本，并建立加载重定向关系。

1. 在 Sources 面板中切换到 Page 子标签，展开页面资源树。
2. 找到目标文件，比如 /static/js/main.js 或 /index.html，右键点击该文件名。
3. 选择 Save for overrides。
4. 在弹出的保存对话框中，保持默认路径不变（即上一步选定的文件夹内），点击 Save。
5. 文件会出现在 Filesystem > Overrides 节点下。如果图标旁出现紫色圆点，表示映射成功。

三、编辑覆盖文件并验证生效

映射完成后，所有对该资源的编辑都会实时同步到本地文件系统。

刷新页面时，浏览器会跳过网络请求，直接加载本地的覆盖版本。

1. 在 Sources > Filesystem 中双击刚才生成的覆盖文件（比如 main.js），打开编辑器。
2. 修改任意内容，比如在 JS 文件末尾添加 console.log('override active');。
3. 按 Ctrl+S 强制保存。有些 Chrome 版本确实需要这一步才能确保同步。
4. 返回页面并刷新。观察控制台是否输出日志，或检查 Network 面板中该资源的响应状态是否显示 200 (from Overrides)。

四、通过 Network 面板直接启用接口响应 Mock

对于动态接口数据的调试，不需要修改 JS 逻辑。可以直接拦截特定请求并替换它的响应体。

这种方法在后端没准备好或需要复现异常返回场景时特别管用。

1. 切换到 Network 面板，刷新页面捕获请求列表。
2. 找到目标接口，比如 /api/v1/user，确保其类型是 fetch 或 XHR 且状态码是 200。
3. 右键点击该请求，选择 Override content。
4. DevTools 会自动跳转到 Sources > Overrides > Editor，并在本地文件夹中创建对应路径的文件，比如 api/v1/user.json。
5. 在编辑器中输入你需要的 Mock 数据，例如 {"code":0,"data":{"id":999,"name":"MockUser"}}，然后按 Ctrl+S 保存。

五、处理常见限制与失效情形

Overrides 功能受协议和环境约束。如果操作后没有出现紫色标记、没有生成文件、或刷新后没生效，大概率违反了底层运行前提。

• 确认当前页面地址栏的协议是 http:// 或 https://；file:/// 协议完全禁用 Overrides。
• 如果调试本地 HTML 文件，必须先启动一个轻量 HTTP 服务，比如执行 npx serve 或使用 VS Code 的 Live Server 插件。
• 检查 Network 面板中目标资源是否被标记为 file。如果出现该字样，说明页面仍以 file 协议加载，需要终止当前访问方式。
• 确保 Overrides 文件夹的复选框已勾选，且没有同时启用其他干扰设置（比如禁用 JavaScript 或 Service Worker），除了 Disable cache 这种本身没问题的选项。

《夸克》非常好用的免费AI浏览器

下载APP查看