Chrome 开发人员工具中是否有 CSS 网格突出显示？
Is there CSS Grid highlighting in Chrome Developer Tools?
在 Firefox 的开发者工具中，可以看到 CSS 网格，未选中时也可以看到。
是否可以在 Chrome 的开发者工具中显示 CSS 网格，即使未选择网格？
Chrome v62 added Grid highlighting support 到其开发工具：
To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. A dashed border appears around each of the grid items. This only works when the selected item, or the parent of the selected item, has display:grid applied to it.
上面的 Chrome 开发者文章还包括一个 link 到简短的 Google 开发者 YouTube 视频使用它：https://www.youtube.com/watch?v=AqwPrR7hklE
在 Chrome v62 之前，Chrome 开发工具无法像这样检查网格。这是 Firefox 开发工具曾经（并将继续）非常强大的领域之一。当时，Chrome-latest 确实支持突出显示各种 CSS 网格单元格和轨道。
Chrome 还有 CSS 网格检查器插件可能支持此功能。我没有用过它们中的任何一个，但至少有六个我见过。一个看起来很有前途的是 Gridman - CSS Grid Inspector（我与这个插件或开发者没有任何关系）。
实际上 Chrome 开发工具（至少从 2017 年 8 月的第 62 版开始）确实提供没有插件 CSS 网格突出显示：
To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. A dashed border appears around each of the grid items. This only works when the selected item, or the parent of the selected item, has display:grid applied to it.
在 Firefox 的开发者工具中，可以看到 CSS 网格，未选中时也可以看到。
是否可以在 Chrome 的开发者工具中显示 CSS 网格，即使未选择网格？
Chrome v62 added Grid highlighting support 到其开发工具：
To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. A dashed border appears around each of the grid items. This only works when the selected item, or the parent of the selected item, has
display:gridapplied to it.
上面的 Chrome 开发者文章还包括一个 link 到简短的 Google 开发者 YouTube 视频使用它：https://www.youtube.com/watch?v=AqwPrR7hklE
在 Chrome v62 之前，Chrome 开发工具无法像这样检查网格。这是 Firefox 开发工具曾经（并将继续）非常强大的领域之一。当时，Chrome-latest 确实支持突出显示各种 CSS 网格单元格和轨道。
Chrome 还有 CSS 网格检查器插件可能支持此功能。我没有用过它们中的任何一个，但至少有六个我见过。一个看起来很有前途的是 Gridman - CSS Grid Inspector（我与这个插件或开发者没有任何关系）。
实际上 Chrome 开发工具（至少从 2017 年 8 月的第 62 版开始）确实提供没有插件 CSS 网格突出显示：
To view the CSS Grid that's affecting an element, hover over an element in the DOM Tree of the Elements panel. A dashed border appears around each of the grid items. This only works when the selected item, or the parent of the selected item, has display:grid applied to it.