Chrome、Edge和Firefox均支持开发者工具内置CSS Grid网格线可视化调试，无需插件；通过悬停点击网格图标（Chrome/Edge）或勾选Layout面板选项（Firefox）即可开启，显示行列编号、区域范围及颜色区分。
Chrome、Edge 和 Firefox 都支持在开发者工具中直接显示 CSS Grid 的网格线，无需额外代码或插件，开启后能清晰看到行/列轨道、线号和区域范围。
Chrome / Edge 开启网格高亮
打开开发者工具（F12），切换到 Elements 面板，选中一个设置了 display: grid 或 display: inline-grid 的元素，在右侧的 Styles 面板中找到 grid 相关声明（如 grid-template-rows）。将鼠标悬停在该属性值上，会出现一个小图标（网格状图标）；点击它即可开启该元素的网格辅助线。
也可右键元素 → Display grid overlay，快速启用。
开启后页面会叠加半透明彩色线条，标出每条网格线编号（如 1、2、row-start 等），并用不同颜色区分行线（横向）和列线（纵向）。
立即学习“前端免费学习笔记（深入）”；
Firefox 启用网格检查器
打开开发者工具（F12），选中目标网格容器，在右侧面板切换到 Layout 标签页。勾选 Show Grid Line Numbers 和 Highlight Grid Areas 即可显示线号与区域背景色。
还可点击 Grid Highlighter 按钮（图标为重叠方格），拖动鼠标实时查看任意位置对应的网格线坐标。
通用调试技巧
- 多个嵌套网格时，辅助线默认只作用于当前选中元素，逐个开启可分层排查
- 辅助线不显示？确认元素确实应用了
grid布局（非flex或block），且未被overflow: hidden或父级裁剪遮挡 - 想临时加粗/变色？可在 Styles 面板手动添加
outline: 1px solid red辅助定位，但注意 outline 不影响布局 - 配合
grid-template-areas使用时，辅助线会自动标注命名区域边界，比数数字更直观
小提示：避免常见误判
网格线“看不见”有时并非没开启，而是因为：
- 轨道尺寸为
0px或auto且内容为空，导致线间距过小 - 使用了
gap，但辅助线只标轨道线，不标 gap 区域（gap 是轨道间的空白，本身无线） - 设置了
grid-auto-flow: column却按行思维数线，辅助线仍按实际流向渲染
开启辅助线后，对照控制台中实时显示的线号与 CSS 定义，能快速验证 grid-column-start 等属性是否写错位置。
