必须使用Firefox Developer Edition并确保目标元素应用display: grid/inline-grid；通过Layout面板勾选Overlay Grid或点击规则面板中display声明后的?图标启用网格高亮，再验证Computed值为grid且排除-ms-grid等失效原因。
要在火狐浏览器中直观查看网页已生效的CSS网格结构，必须使用Firefox Developer Edition，并确保目标元素确实应用了display: grid或display: inline-grid，否则Grid检查器将不可见或无法激活。
确认浏览器版本与基础前提
打开地址栏，输入about:support并回车→在“应用程序”部分确认“名称”字段显示为【Firefox Developer Edition】，而非Release或ESR版本。Windows 8.1及更低系统不支持Developer Edition，【将无法启用Grid Inspector】。
若当前不是Developer Edition，请关闭普通Firefox，前往官网下载并安装最新版（2026年7月起默认启用网格高亮）。
打开Grid检查器的两种路径
方法一：快捷选中后直达布局面板
按Ctrl+Shift+C（Win/Linux）或Cmd+Shift+C（macOS）→鼠标悬停目标容器（如class="grid"的<div>）→单击选中→右侧自动切换至“Layout”标签页→找到“Grid”区域，勾选【Overlay Grid】。
立即学习“前端免费学习笔记（深入）”；
方法二：从元素检查器手动触发
右键目标网格容器→选择“检查元素”→在右侧“规则”面板中定位到display: grid声明行→点击该行末尾的?图标（Grid图标）→网页立即叠加半透明网格线，无需切换标签页。
验证Grid是否真正生效
第一步：检查Computed值是否为grid
在元素面板中切换到“Computed”标签页→搜索display→确认计算值明确显示为grid或inline-grid。若显示为block或flex，说明样式被覆盖或未命中。
第二步：排查常见失效原因
检查CSS中是否误写display: -ms-grid——Firefox自62版起已彻底移除对该前缀的支持，【若误用会导致整个Grid失效，退化为普通块级流】；也需确认没有拼写错误（如gridd）、未被@supports或媒体查询包裹而未生效、且未被后续display: block等声明覆盖。
解读网格高亮信息
勾选“Show line numbers”后，蓝色虚线为行线（Row lines），红色虚线为列线（Column lines），编号从1开始递增；悬停某条线时，顶部会实时显示其对应轨道定义（如1fr或minmax(200px, 1fr)）及当前像素尺寸。
若页面使用grid-template-areas，勾选“Show area names”后，每个命名区域（如"header"）将以浅色半透明块叠加，边缘标注区域名；Firefox Layout面板可直接点击区域名跳转到对应CSS声明位置。
鼠标移到任意网格子项上，开发者工具会实时高亮其占据的行列范围，并在底部状态栏显示grid-row: 2 / 4、grid-column: 1 / -1等定位信息。
