Chrome开发者工具中是否有CSS Grid突出显示？

Question

在Firefox的开发者工具中，可以看到CSS网格，还可以看到它何时未被选中。

是否可以在Chrome的开发者工具中显示CSS网格，同时未选择网格？

Answer 1

Chrome v62 added Grid highlighting support到其开发工具：

  

要查看影响元素的CSS网格，请将鼠标悬停在元素面板的 DOM树中的元素上。每个网格项周围都会出现一个虚线边框。这仅适用于所选项目或所选项目的父项已应用display:grid的情况。

     

上面的Chrome开发者文章还包含指向使用它的简短Google Developers YouTube视频的链接：https://www.youtube.com/watch?v=AqwPrR7hklE

在Chrome v62之前，Chrome开发工具无法像这样检查网格。这是Firefox开发工具所在的领域之一，并且继续显着增强。当时，Chrome-latest确实支持各种CSS网格单元和轨道的突出显示。

还有适用于Chrome的CSS Grid检查器插件可支持此功能。我不使用它们中的任何一个，但至少有六个我见过。看起来很有希望的是Gridman - CSS Grid Inspector（我与这个插件或开发者没有任何关系）。

Answer 2

实际上，Chrome开发工具（至少从2017年8月开始是62版）确实提供了没有附加CSS网格突出显示的功能：

  

要查看影响元素的CSS网格，请将鼠标悬停在“元素”面板的DOM树中的元素上。每个网格项周围都会出现一个虚线边框。仅当所选项目或所选项目的父项应用了display：grid时，此方法才有效。