Chrome 开发者工具中是否有 CSS 网格突出显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48405475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there CSS Grid highlighting in Chrome Developer Tools?
提问by asv
In the developer tools of Firefox, it is possible see the CSS grid, and also see when it is not selected.
在 Firefox 的开发者工具中，可以看到 CSS 网格，也可以在未选中时查看。
Is it possible to show a CSS Grid in the developer tools of Chrome, also when the grid is not selected?
是否可以在 Chrome 的开发人员工具中显示 CSS 网格，也可以在未选择网格时显示？
回答by TylerH
Chrome v62 added Grid highlighting supportto its dev tools:
Chrome v62为其开发工具添加了网格高亮支持：
To view the CSS Grid that's affecting an element, hover over an element in the DOM Treeof the Elementspanel. 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:gridapplied to it.
要查看影响元素的 CSS 网格，请将鼠标悬停在“元素”面板的DOM 树中的某个元素上。每个网格项目周围都会出现虚线边框。这仅在所选项目或所选项目的父项已应用于它时才有效。
display:grid
The Chrome Developers article above also includes a link to a short Google Developers YouTube video on using it: https://www.youtube.com/watch?v=AqwPrR7hklE
上面的 Chrome 开发者文章还包含一个链接，指向一个关于使用它的谷歌开发者 YouTube 短视频：https: //www.youtube.com/watch?v=AqwPrR7hklE
Prior to Chrome v62 there was no way in the Chrome dev tools to inspect grids like this. It's one of areas where Firefox dev tools were—and continue to be—significantly stronger. At the time, Chrome-latest did support the highlighting of various CSS Grid cells and tracks, though.
在 Chrome v62 之前，Chrome 开发工具无法像这样检查网格。这是 Firefox 开发工具曾经——并将继续——显着强大的领域之一。不过，当时，Chrome-latest 确实支持突出显示各种 CSS 网格单元格和轨道。
There are also CSS Grid inspector addons for Chrome that may support this feature. I don't use any of them, but there are at least half a dozen I have seen. One that looks promising is Gridman - CSS Grid Inspector(I have no affiliation with this addon or developer).
Chrome 也有可能支持此功能的 CSS 网格检查器插件。我不使用它们中的任何一个，但我见过至少有六个。看起来很有希望的是Gridman - CSS Grid Inspector（我与此插件或开发人员没有任何关系）。
回答by r1oga
Actually Chrome Dev Tools (at least from version 62 from August 2017) do provide without addon CSS grid highlighting:
实际上，Chrome 开发工具（至少从 2017 年 8 月的 62 版开始）确实提供了没有插件 CSS 网格突出显示的功能：
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.
要查看影响元素的 CSS 网格，请将鼠标悬停在“元素”面板的 DOM 树中的某个元素上。每个网格项目周围都会出现虚线边框。这仅在所选项目或所选项目的父项应用 display:grid 时有效。
