css - Chrome 开发者工具中是否有 CSS 网格突出显示？

Question

在Firefox的开发者工具中，可以看到CSS网格，也可以看到没有选中的时候。

是否可以在 Chrome 的开发者工具中显示 CSS 网格，即使没有选择网格？

Answer 1

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 开发者文章还包含一个链接，指向关于使用它的 Google Developers YouTube 短视频:https://www.youtube.com/watch?v=AqwPrR7hklE

---

在 Chrome v62 之前，Chrome 开发工具无法像这样检查网格。这是 Firefox 开发工具曾经(并将继续)非常强大的领域之一。不过，当时 Chrome-latest 确实支持突出显示各种 CSS 网格单元格和轨道。

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