Chrome开发者工具是否支持CSS Grid高亮？未选中网格时能否显示？

嘿，这个问题问得很实用！我天天和Chrome DevTools打交道，刚好能给你讲清楚：

首先，Chrome开发者工具完全具备CSS Grid高亮功能，而且也支持在未选中网格容器的情况下持续显示网格，操作逻辑是这样的：

• 开启网格高亮的方式：
  打开DevTools（按F12或者Ctrl+Shift+I），切换到「Elements」面板，选中应用了display: grid的容器元素。在右侧「Styles」面板里找到display: grid这一行，行尾会有一个小网格图标（就是那种由几条线组成的格子样式），点击它就能立刻在页面上高亮显示该网格的轨道、网格线、单元格等细节。

• 未选中时保持高亮的方法：
  当你点击开启网格高亮后，哪怕你取消选中这个网格容器元素，页面上的网格高亮依然会保留！不需要一直选中元素才能看到。如果想要关闭某个网格的高亮，只需要再次点击对应display: grid行尾的网格图标，或者在「Elements」面板顶部的「Highlights」下拉菜单里，找到对应的网格项并取消勾选即可。

和Firefox的逻辑类似，Chrome的这个功能也是为了方便开发者在调整页面布局时，不用一直选中网格容器就能实时查看网格的状态，调试起来非常顺手。

内容的提问来源于stack exchange，提问作者asv