【发布时间】：2018-07-02 11:52:10
【问题描述】：
在火狐的开发者工具中，可以看到CSS网格，也可以看到没有选中的时候。
是否可以在 Chrome 的开发者工具中显示 CSS Grid，即使没有选择网格？
【问题讨论】：
标签： css google-chrome css-grid developer-tools
【发布时间】：2018-07-02 11:52:10
【问题描述】：
Chrome v62 added Grid highlighting support 到它的开发工具：
要查看影响元素的 CSS 网格，请将鼠标悬停在 元素 面板的 DOM 树 中的元素上。每个网格项目周围都会出现一个虚线边框。这仅在所选项目或所选项目的父项已应用
display:grid时有效。
上面的 Chrome 开发者文章还包含一个指向 Google 开发者 YouTube 短视频的链接：https://www.youtube.com/watch?v=AqwPrR7hklE
在 Chrome v62 之前，Chrome 开发工具无法像这样检查网格。这是 Firefox 开发工具曾经——并将继续——显着强大的领域之一。不过，当时的 Chrome 最新版本确实支持突出显示各种 CSS 网格单元格和轨道。
还有一些适用于 Chrome 的 CSS Grid 检查器插件可能支持此功能。我一个都没用过，但我见过至少有六个。一个看起来很有前途的是Gridman - CSS Grid Inspector（我与这个插件或开发者没有任何关系）。
【讨论】：
实际上，Chrome 开发工具（至少从 2017 年 8 月的 62 版开始）确实提供了不带插件的 CSS 网格突出显示：
要查看影响元素的 CSS 网格，请将鼠标悬停在元素面板的 DOM 树中的元素上。每个网格项目周围都会出现一个虚线边框。这仅在所选项目或所选项目的父项已应用 display:grid 时有效。
【讨论】：
-
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
-
对。谢谢你的提示！ （还没有太多为答案做出贡献的经验......）。答案已更新！