Flexbox 与 Grid 布局检查器

Chrome DevTools 会在元素面板中 DOM 节点旁为 Flexbox 容器标记“flex”。点击该标记可以切换 Flexbox 叠加层，其中的彩色线条会显示主轴、交叉轴、项目边界和间距。

Grid 容器会显示“grid”标记。点击该标记可以切换网格叠加层，其中的彩色线条表示列、行和间距。在布局面板中固定的持久叠加层会在滚动或调整视口大小时保持可见。

DevTools → 元素 → 布局标签会列出页面上的所有 flex 和 grid 容器。点击容器名称可以在 DOM 中选中它，并切换其叠加层。您可以在此配置叠加层的外观（线条颜色、标签可见性和轨道尺寸）。

启用“显示轨道尺寸”后，叠加层会显示轨道名称和尺寸。固有尺寸（auto、min-content、max-content）和分数单位（fr）会显示解析后的像素值，从而揭示 fr 单位如何划分可用空间。

请选择一个弹性项目（弹性容器的子项）。样式面板会显示 flex 简写属性的展开结果——弹性增长、弹性收缩和弹性基准尺寸。叠加层会突出显示该项目在主轴上的尺寸、基准尺寸，以及应用的任何增长或收缩。

包含 grid-template-areas 的网格容器会显示命名区域叠加层。每个命名区域都有标签并使用不同颜色标识。通过这种可视化方式，可以轻松验证网格区域分配是否符合预期的布局模板。

DevTools 会以不同方式标记子网格容器。它们的轨道线会与父网格轨道对齐，叠加层会直观地显示这种对齐关系，从而确认子网格项目参与的是父网格的坐标系。

项目未对齐通常是因为内容分布、项目对齐或自身对齐的值设置错误。弹性盒/网格叠加层会显示项目相对于轴线的位置。请尝试在样式面板中切换对齐属性，并实时观察叠加层的变化。

叠加层会将项目之间的间距渲染为彩色带状区域。这样可以轻松确认间距值，并判断间距是来自间距属性（正确），还是来自外边距（在弹性行中可能意外折叠）。

网格叠加层会区分隐式轨道（为溢出的项目自动创建）和显式轨道（在网格模板中定义）。虚线表示隐式轨道。如果内容创建了意外的隐式轨道，叠加层会立即显示溢出模式。

请将布局检查器与设备模式结合使用。调整视口大小，并实时观察弹性换行以及网格自动填充/自动适应轨道如何重新排列。与手动调整浏览器窗口相比，这种方式能更早发现响应式布局问题。

DevTools 网格叠加层显示了哪些渲染页面上看不到的信息？

DevTools 弹性盒与网格布局检查器会将轴线、轨道尺寸、间距、命名区域和隐式轨道显示为可交互的叠加层。结合用于管理叠加层的布局面板，它比单独阅读 CSS 更快速、更直观地调试复杂的 CSS 布局。