Grid/Flex 可视化工具能检测网页上的每一个 CSS Grid 和 Flexbox 容器，并以彩色 overlay 的形式直接在页面上呈现其布局结构。无需打开 DevTools，即可查看 grid 线条、轨道尺寸、gap 值、flex 方向、对齐轴及子元素的尺寸信息。
CSS Grid 和 Flexbox 是现代网页布局的基础，但它们默认是不可见的。仅凭肉眼观察页面，无法看到 grid 线条、flex 轴或 gap 值。浏览器 DevTools 提供了一些 grid overlay 功能，但需要先在元素面板中找到容器，手动启用 overlay，且每次只能显示一个容器。Grid/Flex 可视化工具将这一过程完全自动化——它扫描页面，找到所有 Grid 和 Flex 容器，并以视觉 overlay 的形式呈现其布局结构。Grid 容器会显示带有轨道尺寸标注的列线和行线；Flex 容器会显示主轴方向、交叉轴对齐方式，以及空间的分配方式。gap 区域以彩色色带高亮显示，并标注像素值。点击任意容器，即可查看列出所有布局属性的详细属性面板。
Grid 容器会为每条行列轨道显示彩色线条，每条线上标注轨道尺寸（1fr、auto、200px）。gap 区域以半透明色带高亮，并标注 gap 的像素值。显式轨道与隐式轨道通过实线与虚线加以区分。
Flex 容器会以箭头形式显示主轴方向（row、row-reverse、column、column-reverse），以及与之垂直的交叉轴。justify-content 和 align-items 通过带标注的对齐指示器可视化呈现，清楚展示子元素之间的空间分配方式。
该工具会自动扫描整个页面，找到所有设置了 display: grid 或 display: flex（包括 inline 变体）的元素，并以角标数量显示检测到的总数。无需手动选择元素——所有容器均会被自动发现并列出。
点击任意容器，即可查看其完整布局属性：grid-template-columns/rows、grid-gap、flex-direction、justify-content、align-items、flex-wrap，以及所有子元素的尺寸属性（flex-grow、flex-shrink、flex-basis、grid-column、grid-row）。
Grid 或 Flex 容器内的每个子元素均显示其实际渲染尺寸、flex-grow/shrink 值及 grid 区域位置，让你清楚了解每个子元素占据多少空间，以及背后的原因。
可检测嵌套在其他 Grid/Flex 容器内的 Grid 和 Flex 容器。overlay 以不同颜色渲染每一层嵌套，帮助你直观理解完整的布局层次结构。
某列 grid 比预期宽或窄？overlay 会显示实际轨道尺寸（1fr 解析为 342px，auto 解析为 156px），让你清楚看到浏览器的计算结果。
为什么某个 flex 子元素比其他子元素更宽？可视化工具会显示每个子元素的 flex-grow、flex-shrink 和 flex-basis 值，让空间分配逻辑一目了然。
调整浏览器窗口大小，观察 grid overlay 实时更新。查看 grid-template-columns 如何从桌面端的 "1fr 1fr 1fr" 变为移动端的 "1fr"，并在每个断点处验证过渡效果。
访问优质网站，观察它们在生产环境中如何运用 Grid 和 Flex 布局。视觉 overlay 能将抽象概念（fr 单位、auto-fit、justify-content）变得直观可感。
检查页面上所有卡片 grid 是否使用了相同的列数和 gap 值。overlay 让不一致之处立刻显形——某个区块使用 20px gap 而另一个使用 24px 的问题，一眼便能发现。
打开 DevSuite Pro 浮动 dock，点击 Grid/Flex 可视化工具图标。该工具将扫描页面并检测所有 Grid 和 Flex 容器。
每个 Grid 和 Flex 容器都会获得彩色边框 overlay。面板中列出所有检测到的容器及其类型（Grid 或 Flex）和元素选择器。
点击任意容器查看其完整布局属性。Grid 容器显示轨道线条和尺寸；Flex 容器显示轴方向和对齐方式。
每个子元素显示其计算后的尺寸及布局专属属性（flex-grow、grid-area），帮助你了解空间在子元素之间的分配方式。
再次点击工具图标，移除所有 overlay，恢复正常页面视图。
