Chrome DevTools: Grid Explorer

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Search for a command to run...

I'm a full-stack developer from South Africa 🇿🇦. I love writing about JavaScript, HTML and CSS.
Firefox has some great debugging as well 🦊
In either case, you'll need a lot of browsers to test with (or BrowserStack). Rather stick to what works for you.
Most of you know me for my consistency, a golden arrow in my blog series. I've written 1000 articles in 1008 days! Almost an article a day, and my honeymoon was the only holiday I ever took. I'm super proud of this achievement; it has been a fantasti...

It's not the first time I'll be talking about community. I think it's an essential aspect of any successful tool. This shows in my previous explorations of Astro, Medusa, and now Vendure as well. All these products thrive in a super open, welcoming, ...

The cool part about Vendure is how easy it is to set up and how abstract each layer is. Basically, we get the following elements: External database Server Worker Admin UI Frontend While this is amazing, it also brings a bit of complexity when it co...

The previous article looked at customizing Vendure on a data and process level. In this article, we'll look at customizing emails, as they are often a big part of a webshop system. We'll be looking at two different layers of customization for customi...

Even though Vendure is a pretty significant project out of the box, in some cases, we might want to go in and modify some elements to work to our specific use case. In this article, I'll take a high-level look at some elements we can customize within...

I like to look at the "What's New" tab in Chrome Dev Tools every now and then.
This time the update is 87, and I've noted they updated the CSS Grid debugging options!

Time to explore what's new and what it can do for us!
First, we need to open the Chrome Dev Tools.
Mac
Cmd+Shift+Cor Windows:Ctrl+Shift+C.
Now we can use the Elements inspector where we can see all the elements in there you will see the [grid] block behind grid elements; this was the existing feature.

This little toggle will show us the grid overview, but that is about it.
In the new feature, there is a whole grid explorer under the Layout tab.
You can find the layout tab on the bottom of your dev tools.

Within this tab you will see all the grids that are on the page. In this case, it's just the one.
You can check the little checkbox before your grid, and it will highlight the grid.
Then next to it is a small color picker so you can change the default red color.
You might think that's not much more than the above [grid] block does.
But there are a bit more powerful items above.
You can toggle the following checkboxes:
As you can imagine, this can help us really well defining which block is rendered where.
I love this new area names function, and I'm sure it will help many of you exploring how grid works.
Thank you Chrome DevTools for making grid debugging even better!
I've made this little gif to showcase what happens when you toggle each option.

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter