«   Previous tip Next tip   »

Chrome DevTools: Inspecting and debugging CSS Grid

27th September 2020
Inspecting and debugging CSS Grid

Introduction

CSS Grid inspection is now possible from the Elements Panel. This is helpful for debugging CSS issues, and learning more about CSS Grid.

CSS Grid Inspecting in the Elements Panel DOM Tree

There's also a dedicated Layout Pane in the Elements Panel, which provides customization options for the CSS Grid Inspector. You can view:

Which can all be helpful in understanding how rows and columns play a part within a CSS Grid.

How to use this feature

  1. Locate an element using display: grid.
  2. Click the label marked grid in the DOM Tree.
  3. Select Show Layout from the Command Menu (Cmd + Shift + P).
  4. Explore the different options available here, such as:
    • Toggling Grid overlays on and off.
    • Enabling track sizes, area names and extended grid lines.

Note, if you do not see a Layout Pane in the Elements Panel, then you can check that CSS Grid Debugging is enabled:

  1. Open Show Experiments from the Command Menu (Cmd + Shift + P).
  2. Check the box labelled Enable new CSS Grid debugging features.
  3. Restart DevTools with the shortcut Alt + R.

Extra

The Inspect Element feature can also provide contextual information via the Inspect Element Tooltip.

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week