HTML调试核心是确认浏览器最终渲染的DOM是否符合意图，而非查找语法错误；需通过Elements面板、document.body.innerHTML对比、W3C验证及本地HTTP服务等手段，排查CSS隐藏、JS覆盖、浏览器容错修正及file://协议限制等问题。
HTML调试不是找语法错误，而是确认「浏览器最终渲染的 DOM 是否符合你的意图」——多数问题根本不在 HTML 源码里，而在 CSS 隐藏、JS 覆盖、浏览器容错修正或 file:// 协议限制中。
Elements 面板改完没反应？先排查这三类抢控权行为
你在 Elements 面板双击改了 <h1>标题</h1>，回车后页面没变，大概率不是工具失效：
- CSS 把它藏了：
display: none、visibility: hidden、opacity: 0或负z-index；在右侧Styles面板里逐个点击禁用规则，立刻验证 - JS 在定时覆盖：比如
setInterval(() => btn.innerText = '加载中', 1000)，会秒杀你的手动修改；右键该元素 →Break on→Attribute modifications，能捕获 JS 修改innerText或class的瞬间 - 你改的是内存 DOM，不是源文件：刷新就还原；别误以为“没生效”=“工具坏了”，这是正常行为
确认真实 DOM 结构：别信源码，要看 document.body.innerHTML
浏览器对嵌套错误（如 <p><div>xxx</div></p>）会静默容错修正，但结果常和你预期相反。不能只信原始 HTML 文件：
- 在控制台输入
document.body.innerHTML，复制输出内容，和原始 HTML 逐行对比，差异就是浏览器干的“好事” - 用 W3C Validator（
https://validator.w3.org）粘贴源码验证，重点盯报错如Stray end tag 'div'或Start tag 'p' seen but an element of the same type was already open - VS Code 装
HTMLHint插件，配.htmlhintrc，保存时就提示tagname-lowercase或非法嵌套，把问题卡在写入前
本地双击打开总出怪问题？必须切 HTTP 服务
走 file:// 协议时，fetch、localStorage（部分浏览器）、甚至某些 @import 都会被同源策略拦截，导致行为和线上不一致：
立即学习“前端免费学习笔记（深入）”；
- 用
npx serve（需 Node.js）或python3 -m http.server 8000启一个本地服务，地址变成http://localhost:8000就一切正常 -
Network面板在file://下基本不可用，看不到资源加载瀑布流，也查不到 404；切 HTTP 服务后才能真正排查<link href="style.css">是否路径错误 - Chrome 扩展（如 Grammarly）有时会劫持快捷键，Mac 用户优先点左上角「选择元素」图标，避免
Cmd+Option+I失灵
快速定位溢出/错位元素：一行 outline 命令就够了
布局错乱时，最高效的方式是视觉化所有元素边界：
- 在控制台执行
$$('*').forEach(el => el.style.outline = '1px solid red')，所有元素立刻带红边框，溢出、塌陷、错位一目了然 - 想临时高亮某个区域？右键元素 →
Inspect→ 在Elements面板选中后按Ctrl+Shift+P（Win）或Cmd+Shift+P（Mac），输入outline，选Add outline快速加边框 - 注意：
outline不影响盒模型尺寸，比border更安全；但别忘了清掉，否则可能干扰后续样式调试
真正难的从来不是怎么改，而是判断该不该改——你看到的结构，未必是你写的结构，更未必是浏览器最终渲染的结构。盯着 Elements 面板看两分钟，再决定动哪一行代码。
