为什么我无法获取 google chrome CSS Grid Inspector？

Question

我一直在尝试将 CSS 网格检查器用于 google chrome 开发工具。但是，我既无法获得元素旁边的 grid 标签（开发工具必须显示），也无法获得 Layout 面板，我应该能够在其中使用网格间隙、行等。

我如何启用/使用它们？

Google Chrome 版本 86.0.4240.75（官方版本）（64 位）

我尝试遵循的文章：https://developers.google.com/web/tools/chrome-devtools/css/grid

Answer 1

启用该功能的方法没有很好的记录。

1. 选择

   Control+Shift+I

   （Windows、Linux）或

   Command+Option+I

   （macOS）
2. 选择

   Shift+?

   显示“设置”面板
3. 导航至实验和...
4. 选中“启用新的 CSS 网格调试功能（重新启动后 Elements 中的布局侧边栏窗格中提供配置选项）”

重新启动开发工具后，您应该会在元素资源管理器中看到小网格标签，并在开发工具侧栏中看到新的布局窗格。

HTH

顺便说一句，87 版本应该默认...

Answer 2

我也花了一段时间，但这是逐步的：

Answer 3

这太棒了，但我没有“启用新的 CSS 网格调试功能”复选框。我有布局和其他功能，但网格检查器不起作用。检查了很多次。 Chrome 122.0.6261.131（官方版本）（64 位）