Chrome 开发者工具中是不是有 CSS Grid 高亮显示？

Posted 2023-02-15

【中文标题】Chrome 开发者工具中是不是有 CSS Grid 高亮显示？

【英文标题】：Is there CSS Grid highlighting in Chrome Developer Tools?Chrome 开发者工具中是否有 CSS Grid 高亮显示？

【发布时间】：2018-07-02 11:52:10

【问题描述】：

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

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

【参考方案1】：

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（我与这个插件或开发者没有任何关系）。

【参考方案2】：

实际上，Chrome 开发工具（至少从 2017 年 8 月的 62 版开始）确实提供了不带插件的 CSS 网格突出显示：

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

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

对。谢谢你的提示！ （还没有太多为答案做出贡献的经验......）。答案已更新！