Chrome DevTools 的 Overrides 功能无法用于 file:/// 协议页面，因其底层文件系统写入能力被浏览器安全策略禁用；必须通过 http:// 或 https:// 协议访问页面（如本地服务器或线上环境）才能启用Overrides，否则面板显示“未启用”、无保存选项且资源标记为 file。
Chrome DevTools 的 Overrides 功能能直接覆盖线上 HTML（以及 JS/CSS）文件，但必须通过 http:// 或 https:// 协议访问页面 —— 用 file:/// 打开本地 HTML 文件时，Overrides 完全不可用。
为什么 file:/// 页面无法启用 Overrides
Chrome 出于安全限制，对本地文件协议（file:///）禁用了 Overrides 的底层文件系统写入能力。即使你成功点击了 Select folder for overrides，也会发现：
- Overrides 面板始终显示「未启用」或灰色状态
- 右键目标 HTML 文件时，没有
Save for overrides选项 - Network 面板里所有资源都标为
file，而非可覆盖的http请求
正确启用 Overrides 调试 HTML 的三步流程
前提是目标页面必须走 HTTP(S) 协议。常见可行路径：
- 用轻量服务器启动本地 HTML：
npx serve、python3 -m http.server 8000、VS Code 的 Live Server 插件 - 部署到测试环境（如 GitHub Pages、Vercel、内网 Nginx）
- 调试已上线的生产页面（例如
https://example.com/index.html）
之后按顺序操作：
立即学习“前端免费学习笔记（深入）”；
- 打开页面 → 按
F12→ 切到Sources面板 → 点击左侧Overrides选项卡 - 点击
Select folder for overrides，选一个有读写权限的本地目录（如~/dev-overrides），并允许浏览器访问 - 回到
Sources → Page，找到目标 HTML 文件（如https://localhost:8000/index.html），右键 →Save for overrides - 编辑器中修改 HTML 内容 →
Ctrl+S→ 刷新页面，改动立即生效
HTML 文件覆盖时的特殊注意事项
Overrides 对 HTML 的行为和 CSS/JS 有细微差别：
- 修改仅在
Sources面板中打开并编辑的原始 HTML 文件才生效；在Elements面板里直接改 DOM 树，不会保存到本地覆盖文件中 - 如果 HTML 是由构建工具（如 Webpack/Vite）注入的 inline script 或 style，这些内容不在独立 HTML 文件里，无法被 Overrides 捕获
- 含查询参数的 URL（如
index.html?debug=true）需按编码规则命名本地文件：index.html%3fdebug=true - 本地修改后刷新，Network 面板中该 HTML 条目会显示
from disk cache或直接跳过请求，这是生效标志
真正容易被忽略的是：Overrides 不是“让本地 HTML 变成线上页面”，而是“让线上页面加载你本地改过的副本”。一旦你误用 file:///，整个链路就断了，没有任何变通方式 —— 必须换 HTTP 服务。
