Chrome DevTools: Inspecting and debugging CSS Grid27th September 2020
CSS Grid inspection is now possible from the Elements Panel. This is helpful for debugging CSS issues, and learning more about CSS Grid.
There's also a dedicated Layout Pane in the Elements Panel, which provides customization options for the CSS Grid Inspector. You can view:
- Grid lines
- Track sizes
- Area names
Which can all be helpful in understanding how rows and columns play a part within a CSS Grid.
How to use this feature
- Locate an element using
- Click the label marked
gridin the DOM Tree.
Show Layoutfrom the Command Menu (Cmd + Shift + P).
- Explore the different options available here, such as:
Grid overlayson and off.
area namesand extended
Note, if you do not see a Layout Pane in the Elements Panel, then you can check that CSS Grid Debugging is enabled:
Show Experimentsfrom the Command Menu (Cmd + Shift + P).
- Check the box labelled
Enable new CSS Grid debugging features.
- Restart DevTools with the shortcut Alt + R.
The Inspect Element feature can also provide contextual information via the Inspect Element Tooltip.