why I can't get the google chrome CSS Grid Inspector?

Question

I've been trying to use the CSS grid inspector for google chrome dev tools. However, I can get neither the grid label aside of the element(as the dev tools must show) nor the Layout panel where I should be able to play with grid gaps, rows, etc.

How can I enable/use them?

Google Chrome Version 86.0.4240.75 (Official Build) (64-bit)

Article I've tried to follow: https://developers.google.com/web/tools/chrome-devtools/css/grid

Answer 1

The way to enable the feature isn't documented very well.

1. Select Control+Shift+I (Windows, Linux) or Command+Option+I (macOS)
2. Select Shift+? to show the Settings panel
3. Navigate to Experiments and...
4. Check "Enable new CSS Grid debugging features (configuration options available in Layout sidebar pane in Elements after Restart)"

After restarting the Dev Tools you should see small grid-tags in the Element Explorer and the new Layout pane in the Dev Tools sidebar.

HTH

BTW it should be default by version 87...

Answer 2

Took me a while as well, but here's the step-by-step:

Open Developer Tools and click on the cogwheel (Settings)

Select the tab Experiments and then check "Enable new CSS Grid debugging features"

The Layout tab appears as the last item