Chrome Overrides功能需先授权本地文件夹读写权限，再映射线上资源或接口至本地副本，编辑后刷新即生效，但仅支持http/https协议，不支持file://及特殊URL未编码场景。
一、启用Overrides本地文件夹并授权读写权限
Overrides功能依赖一个本地目录来持久化保存被修改的资源文件，Chrome必须获得对该目录的完整读写权限，否则无法写入覆盖内容。该步骤是所有后续操作的前提。
1、按下Ctrl+Shift+I（Windows/Linux）或Cmd+Opt+I（Mac）打开开发者工具。
2、切换至Sources面板，在左侧边栏底部找到Overrides标签。
3、点击Select folder for overrides，选择一个空文件夹（例如chrome-overrides）。
立即学习“前端免费学习笔记（深入）”；
4、在系统弹出的权限提示窗口中，点击Allow授予Chrome对该文件夹的完全读写权限。
5、确认该文件夹已出现在Overrides标签下，且其前的复选框处于勾选状态。
二、映射线上HTML/CSS/JS文件到本地覆盖路径
仅配置文件夹无法触发资源替换，必须将目标线上资源与本地文件建立明确映射关系，使Chrome知道应以哪个本地副本替代原始网络响应。
1、在Sources面板的Page子标签中，展开页面资源树，定位目标文件（如https://example.com/app.js或/style.css）。
2、右键点击该文件，选择Save for overrides。
3、在弹出的保存对话框中，保持默认路径（即之前选定的覆盖文件夹内），点击Save。
4、该文件随即在本地文件夹中生成对应路径的副本，文件图标旁出现紫色圆点，表示映射成功。
三、对网络请求启用Override content实现Mock响应
当需模拟后端接口返回数据而非修改静态资源时，需直接拦截fetch/XHR请求并替换其响应体，此操作独立于文件映射，专用于动态数据调试。
1、切换至Network面板，刷新页面以捕获请求列表。
2、定位目标接口（如/api/v1/user），确保其状态码为200且类型为fetch或XHR。
3、右键点击该请求，选择Override content。
4、DevTools自动跳转至Sources > Overrides > Editor，并在所选文件夹中创建对应路径文件（如api/v1/user.json）。
5、该请求右侧出现紫色圆点图标，悬停显示Saved.，表示Mock已激活。
四、编辑覆盖文件并验证生效状态
所有编辑操作均作用于本地文件系统，修改后无需额外构建或部署，刷新即可生效；验证方式需结合Network面板响应标识判断是否真正走覆盖路径。
1、在Sources > Overrides > Editor中打开刚生成的文件（如index.html或data.json）。
2、修改HTML结构、CSS样式、JS逻辑或JSON响应内容。
3、按Ctrl+S强制触发同步（部分Chrome版本需此操作确保写入）。
4、返回Network面板刷新页面，观察目标资源响应状态：若显示200 (from Overrides)或from disk cache，即表示覆盖已生效。
五、处理跨协议与特殊URL的覆盖限制
Overrides功能存在底层安全策略约束，对file://协议及含特殊字符的URL有明确限制，必须提前规避此类无效配置路径。
1、确保目标页面通过http://或https://协议访问；使用file:///打开的本地HTML文件完全不支持Overrides。
2、若URL含查询参数（如/index.html?debug=true），本地文件名须按URL编码规则命名（如index.html%3fdebug=true）。
3、对于跨域资源（如CDN上的第三方JS），需先通过代理服务重定向至同源地址，再执行Save for overrides。
4、若Network中资源始终标记为file且无Override选项，立即检查协议类型——file://协议下Overrides不可用，无任何变通方式。
