用 outline CSS 一键标出所有元素可暴露80%布局Bug，因浏览器渲染结果与HTML源码意图不同，需以Elements面板显示的实际DOM为准，而非源码。
直接用浏览器开发者工具 + 一行 outline CSS 就能暴露 80% 的布局类前端 Bug，不用猜、不 reload、不改源码。
为什么不能只靠看 HTML 源码找溢出 Bug
HTML 源码里写的是“意图”，浏览器渲染的是“结果”——中间隔着 DOM 自动修正、CSS 盒模型计算、继承与层叠。比如你写了 <div style="width: 1200px">，但父容器只有 width: 100% 且没设 overflow: hidden，横向滚动条就来了；可源码里根本看不出这个“溢出链”。更糟的是，浏览器会悄悄帮你补 </p> 或拆开非法嵌套，Elements 面板显示的 DOM 已不是你写的原始结构。
所以排查必须落在渲染后的实际元素上，而不是盯着 .html 文件数标签。
用 * { outline: 1px solid red !important } 一键标出所有元素
这是定位错位、溢出、隐藏内容最高效的起点。在 Chrome / Edge / Firefox 的控制台（F12 → Console）粘贴执行即可：
立即学习“前端免费学习笔记（深入）”；
document.documentElement.style.cssText += '* { outline: 1px solid red !important; background: rgba(255,0,0,0.02) !important; }'- 红色轮廓线会穿透所有 z-index，连
display: none和visibility: hidden元素都标出来（但不标伪元素） - 比
border更安全：不会改变盒模型尺寸，不影响原有布局 - 如果页面太乱，立刻换为精准选择器，比如只标
div：document.documentElement.style.cssText += 'div { outline: 2px solid #0088ff !important; }' - 执行后按 Ctrl+R 刷新可清除（或手动删掉
style属性）
Network 面板里查 404 是 HTML 功能失效的第一线索
很多“按钮点不动”“图片不显示”“样式空白”根本不是 JS 或 CSS 写错了，而是 HTML 里引用的资源加载失败。打开 F12 → Network → 刷新页面，重点关注：
- 状态码为
404的js、css、img、font请求 —— 路径错、大小写错、少个./都会导致 - 类型为
text/html却返回404的请求 —— 很可能是<a href="page.html">指向了不存在的文件 - MIME 类型错误（如
text/plain被当text/css加载）—— 常见于本地双击打开 HTML 文件（file://协议），此时应改用live-server启动 HTTP 服务
Elements 面板里右键“Edit as HTML”是改错最快路径
别复制粘贴回编辑器再刷新——直接在 Elements 面板里右键任意节点，选“Edit as HTML”，就能实时修改并看到效果。适合快速验证：
- 是不是某个
<div>忘了闭合？临时补上</div>看布局是否恢复 - 是不是
class名拼错了？直接双击修改，观察样式是否生效 - 是不是
id重复导致 JS 获取不到元素？高亮所有同名id元素一眼可见 - 注意：这种修改仅在当前页面生命周期有效，刷新即丢，但它能帮你确认“问题是否真的出在这里”
真正容易被忽略的，是浏览器对非法嵌套的静默修复——比如把 <p><div>xxx</div></p> 自动改成 <p></p><div>xxx</div><p></p>。Elements 面板里看到的结构，可能早已不是你写的 HTML。所以，永远以 Elements 面板为准，而不是源码视图或“我以为我写了什么”。
