Is there CSS Grid highlighting in Chrome Developer Tools?

Question

In the developer tools of Firefox, it is possible see the CSS grid, and also see when it is not selected.

Is it possible to show a CSS Grid in the developer tools of Chrome, also when the grid is not selected?

Answer 1

Chrome v62 added Grid highlighting support to its dev tools:

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.

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

---

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.

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).

Answer 2

Actually Chrome Dev Tools (at least from version 62 from August 2017) do provide without addon CSS grid highlighting:

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.