应改用HTTP本地服务运行，因file://协议限制导致CSS/JS加载失败、fetch被拦截、Network面板失效；需用npx serve或python3 -m http.server启动http://localhost调试。
打包后 HTML 文件加载了但样式/脚本不生效？先确认是否走 HTTP 协议
本地双击打开 dist/index.html 时，浏览器用的是 file:// 协议，此时 fetch、localStorage（部分浏览器）、CSS @import、甚至某些 Web API 都会被同源策略拦截——这不是你代码错，是协议限制。
- 用
npx serve（需 Node.js）或python3 -m http.server 8000启一个本地服务，访问http://localhost:8000，90% 的“资源加载失败”问题当场消失 - Network 面板在
file://下基本不可用：看不到 404、查不到瀑布流、无法禁用缓存；切到 HTTP 后才能真实判断<link href="main.a1b2c3.css">是否路径正确 - Chrome 扩展（如 Grammarly）可能劫持
Cmd+Option+I或Ctrl+Shift+C，Mac 用户建议直接点 Elements 面板左上角「选择元素」图标
页面白屏或报 Uncaught SyntaxError: Unexpected token '('？检查 HTML 中 script 标签是否注入成功
Webpack 打包后 JS 文件名带 hash（如 main.7f8a2d.js），但手动复制的 HTML 里还写着 <script src="main.js"></script>，浏览器加载空文件后解析失败，就抛这个错。
- 打开 Elements 面板，展开
或，确认<script></script>标签的src值是否和 Network 面板里实际加载的 JS 文件名一致 - 如果没看到任何
<script></script>标签，大概率是html-webpack-plugin配置漏了inject: true（虽然默认为 true，但显式写出更稳） - 多页应用下，若只配了一个
HtmlWebpackPlugin实例，却有多个 entry，容易导致某页没注入对应 chunk；应为每页单独配实例，并指定chunks: ['login']
Elements 面板里改了 HTML 但页面没反应？不是 DevTools 失效，是别的层在抢控制权
你在 Elements 里把按钮文字改成“已提交”，回车后瞬间变回“提交中”——这不是工具坏了，而是 JS 在覆盖你。
- CSS 隐藏了它：
display: none、visibility: hidden、opacity: 0或负z-index都会让元素“存在但不可见”；在 Styles 面板里逐个点击禁用规则验证 - JS 定时重写：
setInterval(() => btn.innerText = '加载中', 1000)这类逻辑会秒杀你的修改；右键该元素 → Break on → Attribute modifications，能捕获 JS 修改innerText的瞬间 - 你改的是内存 DOM，不是源文件：刷新就还原。别误以为“没生效”=“没修好”，这是正常行为；要验证结构是否真按你预期渲染，用
document.body.innerHTML输出对比原始 HTML
怎么确认最终渲染的 DOM 是你想要的？别信源码，盯住真实 DOM 树
浏览器对嵌套错误（比如 <p></p>
<div>xxx</div>
立即学习“前端免费学习笔记（深入）”；
）会静默容错修正，但修正结果可能和你写的完全相反——HTML 语法错误本身不报错，只默默改。- 在 Elements 面板里找红色高亮节点、灰色禁用标签、或自动补全的闭合符（如浏览器帮你加了 ），这些都是容错痕迹
- 在 Console 输入
document.body.innerHTML，复制输出内容，和原始 HTML 文件逐行比对；差异就是浏览器干的“好事” - 用 W3C Validator（
validator.w3.org）粘贴源码验证，重点看Stray end tag 'div'或Start tag 'p' seen but an element of the same type was already open这类提示
