用 outline css 一键标出所有元素可暴露80%布局bug，因浏览器渲染结果与html源码意图不同，需以elements面板显示的实际dom为准，而非源码。

直接用浏览器开发者工具 + 一行 outline CSS 就能暴露 80% 的布局类前端 Bug，不用猜、不 reload、不改源码。

为什么不能只靠看 HTML 源码找溢出 Bug

HTML 源码里写的是“意图”，浏览器渲染的是“结果”——中间隔着 DOM 自动修正、CSS 盒模型计算、继承与层叠。比如你写了 <div style="width: 1200px">，但父容器只有 <code>width: 100% 且没设 overflow: hidden，横向滚动条就来了；可源码里根本看不出这个“溢出链”。更糟的是，浏览器会悄悄帮你补 或拆开非法嵌套，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 → 刷新页面，重点关注：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

• 状态码为 404 的 js、css、img、font 请求 —— 路径错、大小写错、少个 ./ 都会导致
• 类型为 text/html 却返回 404 的请求 —— 很可能是 <a href="page.html"></a> 指向了不存在的文件
• MIME 类型错误（如 text/plain 被当 text/css 加载）—— 常见于本地双击打开 HTML 文件（file:// 协议），此时应改用 live-server 启动 HTTP 服务

Elements 面板里右键“Edit as HTML”是改错最快路径

别复制粘贴回编辑器再刷新——直接在 Elements 面板里右键任意节点，选“Edit as HTML”，就能实时修改并看到效果。适合快速验证：

• 是不是某个 <div> 忘了闭合？临时补上 <code>