chrome devtools overrides 无法用于 file:/// 协议页面，因安全策略彻底禁用其文件系统写入能力；必须通过 http:// 或 https:// 协议访问页面（如本地服务器或线上环境）才能启用，否则面板显示“未启用”、无保存选项且资源标记为 file。
不能直接在 file:/// 协议下使用 Overrides 调试 HTML —— 这是硬性限制，没有例外，也不支持任何变通方式。
为什么 file:/// 页面完全无法启用 Overrides
Chrome 明确禁用 file:// 协议下的 Overrides 写入能力，这是底层安全策略决定的。你即使点了 Select folder for overrides，也会遇到：
-
Overrides面板始终显示「未启用」或灰色不可点 - 右键 HTML 文件时，没有
Save for overrides选项 -
Network面板里所有资源都标为file，而非可覆盖的 HTTP 请求
这不是配置问题，也不是权限没点“允许”，而是协议层面被彻底拦截。
必须改用 HTTP(S) 协议才能开始调试
只有页面地址以 http:// 或 https:// 开头，Overrides 才可能生效。常见可行路径包括：
- 用轻量服务器启动本地 HTML：
npx serve、python3 -m http.server 8000、VS Code 的Live Server插件 - 部署到测试环境：
GitHub Pages、Vercel、内网Nginx - 直接调试已上线页面，例如：
https://example.com/index.html
只要地址栏不是 file://，就进入了可覆盖的合法链路。
Save for overrides 后修改 HTML 生效的关键细节
HTML 文件的覆盖行为和 CSS/JS 有明显差异，容易误以为“改了但没生效”：
- 仅当你在
Sources → Page中打开并编辑原始 HTML 文件（如https://localhost:8000/index.html）时，保存才会写入本地覆盖文件 - 在
Elements面板里直接改 DOM 树，不会同步到本地文件，刷新即丢 - 如果 HTML 是构建工具（如
Vite、Webpack）注入的<script></script>或<style></style>内联内容，这些代码不在独立 HTML 文件中，Overrides 捕获不到 - 带查询参数的 URL（如
index.html?debug=true）需按编码命名本地文件：index.html%3fdebug=true - 刷新后，
Network面板中该 HTML 条目显示from disk cache或直接跳过请求，才是覆盖生效标志
覆盖后的 HTML 修改不会自动触发重加载，但会立即用于后续访问
你保存 HTML 后，当前页不会自动刷新，需要手动 F5 或 Ctrl+R；但下次访问同一 URL 时，DevTools 会强制从本地覆盖文件读取，而非网络。这个机制依赖两个前提同时满足：
-
Filesystem下对应文件夹前的复选框已被勾选（即启用重定向） - 目标 HTML 确实执行过
Save for overrides，且本地路径存在同名文件
最容易被忽略的是：修改 HTML 后忘记刷新页面，或者误以为 Elements 里的实时编辑能持久化 —— 它不能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
