dgozman, what do you think?

Looks interesting, but maybe css flex layout support would be even more valuable? Is it widespread?

We can consider adding a separate layout panel to debug CSS flexbox or grid.

Deleted: Firefox-grid.png 123 KB

	Firefox-grid.png 123 KB View Download

Grid Layout has just been hitting the browsers in March (Firefox 52, Chrome 57, Safari 10.1), so it's still on early stages regarding adoption. So yeah Flexbox is much more widespread.

However I'm not sure which kind of things would be shown for flexbox, as flexbox depends a lot on the items. It's not like grid where the container defines a lot of things and the items get placed there. I'm not aware of anything special in Firefox inspector regarding Flexbox. Anyway, probably a different bug for Flexbox should be reported.

Thanks for the points, we'll look into this.

 Issue 715014  has been merged into this issue.

It would be incredibly useful to see this in Chrome. I'm switching to Firefox when doing anything complicated with Grid, and having to advise people that I teach to do the same.

Unlike pretty much every other layout method grid acts on the container, not the child items. Therefore you need to know something about the grid in order to understand the item. In particular around sizing and alignment, which can get quite complicated, there is a lot that DevTools could help with. 

I support the addition of this feature as well. Sometimes visualizing the grid that you are trying to create in your mind can be a challenge, and Firefox has shown that overlaying a visual wireframe of your grid is very helpful in understanding your layout. Adding support for flex in this regard would be great as well, albeit with a different abstraction, most likely showcasing the placement, orientation and stretch factors of the spec visually. Not sure what that would look like yet, however.

+1 for a Chrome CSS Grid Layout inspector. 

When debugging or working with CSS Grid Layout, I open Firefox, use their dev tools, and then return to Chrome. It's an incredibly useful tool to help grok the layout of your grid. 

It's actually the first time in forever that I've had to jump to a non-Chrome browser's dev tools. 

I think in my case where I am trying to get the ball rolling in my team that having a grid-inspector would help speed up adoption.

The problem is most developers are accustomed to seeing layout being described in their markup, so when they see a component or layout that has been done with Grid it looks odd to them and it can be hard for people who are new to Grid to understand what is going on by looking at the CSS alone.

james,

basic grid layout highlight will be available in Chrome 62 (it had been available in Canary for some time. I would prefer to close this bug and have new feature requests for more advanced support.