真正要配置好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功能受到协议和环境约束。如果操作后没有出现紫色标记、没有生成文件，或者刷新后没有生效，大概率是违反了底层的运行前提。
1、确认当前页面地址栏的协议是 https:// 或 https://；file:/// 协议是完全禁用Overrides的。
2、如果你在调试本地HTML文件，必须先启动一个轻量HTTP服务，比如执行 npx serve 或者使用VS Code的Live Server插件。
3、检查Network面板中目标资源是否被标记为 file。如果出现这个字样，说明页面仍然以file协议加载，需要终止当前的访问方式。
4、确保Overrides文件夹的复选框已经勾选，并且没有同时启用其他干扰设置（比如禁用JavaScript或Service Worker），除了Disable cache这种本身就没有问题的选项。
