outline不占空间且不触发重排，Layout面板直观显示Flex/Grid结构，Computed面板可反向定位样式冲突源，will-change用于验证合成层问题。
用 outline 代替 border 快速圈出所有元素
调试布局时，给元素加 border: 1px solid red 看似直观，但会改变盒模型（触发重排），导致尺寸错乱、浮动塌陷重现不了，反而掩盖真实问题。而 outline 不占空间、不参与布局计算，是真正的“纯视觉标记”。
- 临时全局标出所有子元素：
* { outline: 1px dashed #00f; } - 只标某容器下的直系子项（避免干扰）：
.card > * { outline: 2px solid #e74c3c; } - Chrome/Firefox 中右键元素 → “Break on” → “Attribute modification”，可捕获 JS 动态改
outline的时机
打开浏览器的 Layout 面板看 Flex/Grid 实际结构
光看 HTML 和 CSS 规则，很难判断 flex-wrap 是否生效、grid-template-areas 是否对齐、gap 是不是被折叠——这些在 Elements 面板里都是“脑补”。Layout 面板（Chrome）或 CSS Grid Inspector（Firefox）会直接画出网格线、Flex 项目边界和对齐基线。
- 在 Chrome 中：选中元素 → 右侧
Layout标签页 → 勾选Show grid areas或Show flex overlay - Firefox 中：点击元素 →
Grid标签页 → 拖动滑块实时调整grid-gap，观察是否撑开容器 - 注意：若网格线没显示，先确认该元素确实有
display: grid或display: flex，且没有被父级overflow: hidden截断视图
用 will-change: transform 强制创建独立图层，排除渲染干扰
某些布局错位（比如固定定位元素抖动、transform 动画卡顿）其实是 GPU 合成层缺失导致的重绘扩散。此时加 will-change: transform 并非为性能优化，而是“强制隔离”，让该元素脱离普通文档流渲染路径，从而验证是否是合成层冲突引发的视觉异常。
- 临时加在疑似问题元素上：
.modal { will-change: transform; } - 加完后若错位消失，说明原布局依赖了错误的层叠上下文（如
z-index被父级transform创建的新层截断） - ⚠️ 切记：调试完必须移除，长期保留会增加内存占用，且现代浏览器已能自动优化多数场景
逐块关闭样式，用 Computed 面板反向定位冲突源
当多个 CSS 文件叠加、第三方组件样式侵入时，“哪里写的有问题”比“怎么修”更难。与其一行行删代码，不如在 Computed 面板里逆向操作：找到最终生效的某个属性（如 width: 200px），点开右侧箭头，它会列出所有影响该值的规则来源及顺序；被划掉的那条，就是被覆盖的“嫌疑样式”。
立即学习“前端免费学习笔记（深入）”；
- 重点看三类来源：
inline style（JS 注入）、user agent stylesheet（浏览器默认）、third-party.css（如 antd、bootstrap） - 快速禁用某条规则：在
Styles面板中，取消勾选属性前的复选框（不用删代码，也不用刷新） - 若发现
margin总是被设为0，但找不到来源 → 检查是否用了* { margin: 0; }，这种通配符常被忽略却影响深远
布局调试效率低，本质是“猜”得太多、“看”得太少。真正快的不是写更多 CSS，而是让浏览器把它的计算过程摊开给你看——outline、Layout 面板、Computed 值这三样，比任何调试技巧都靠得住。容易被忽略的是：别总盯着“怎么让它显示对”，先确认“它到底被谁算错了”。
