在Firefox的开发者工具中，可以查看CSS网格，并且也可以查看它何时未被选中。
在Chrome的开发者工具中，是否可以显示CSS网格，即使没有选中该网格？
2个回答
31
Chrome v62在其开发工具中新增了网格高亮支持：
要查看影响元素的CSS网格，请将鼠标悬停在元素面板的DOM树中的元素上。每个网格项周围出现虚线边框。只有当所选项目或所选项目的父级应用了
display:grid时，此功能才有效。
上述Chrome开发人员文章还包括一个链接到使用它的Google Developers短视频：https://www.youtube.com/watch?v=AqwPrR7hklE
在Chrome v62之前，Chrome开发工具没有办法像这样检查网格。这是Firefox开发工具显著更强的领域之一，并且仍然如此。当时，Chrome-latest确实支持突出显示各种CSS Grid单元格和轨道。
此外，Chrome还有CSS Grid检查器插件可以支持此功能。我不使用它们中的任何一个，但至少有半打我见过的插件。其中一个看起来很有前途，Gridman - CSS Grid Inspector（我与此插件或开发人员无关）。
- TylerH
8
实际上，Chrome Dev Tools（至少从2017年8月的版本62开始）在没有插件的情况下提供了CSS网格高亮：
要查看影响元素的CSS Grid，请将鼠标悬停在“Elements”面板的DOM树中的元素上。每个网格项周围出现虚线边框。这仅在所选项目或所选项目的父级应用了display:grid时才有效。
- r1oga
2
2虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅链接的答案可能会失效。-【来自审查】 - Adam Richardson
4好的，谢谢指点！（我在回答方面经验不是很丰富...）回答已更新！ - 3pwd
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接