Debugging CSS Grid with Firefox Dev Tools

Publikováno: 16.7.2019

CSS Grid is mostly composed of rows, columns, cells, tracks, gaps etc. These things are not elements by themselves; hence, it can be really tasking to visualize and debug them. In this post, we’ll look at a few ways we can do it by using the inbuilt developer tools in the Firefox browser.

To do that, we will build a demo CSS Grid application and walk through the debug processes. For this article, we will be using the Firefox Developer Edition for debugging, feel free to download it if you care to follow along.

To get started, we’ll create a mini CSS project that displays a grid of cat images and then get into the debugging process with the installed Firefox developer tools.

Demo

Here’s a simple demo to serve the purpose, open your favourite code editor and paste in these HTML and CSS snippets:

//HTML file for debug demo
<body>
  <div class="wrapper">
    <div class="cat"><img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"> </div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"><img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"> </div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"> <img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"></div>
    <div class="cat"><img class="cat-img" src="http://placekitten.com/g/350/200" alt="a kitten"> </div>
  </div>
</body>

Also, for the CSS, update your file with this snippet:

//CSS file for debug demo
body {
  margin: 40px;
  background-color: #fff
}
.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-gap: 10px;
}
.cat {
  background-color: black;
  border-radius: 5px;
  padding: 5px;
  border-color: black;
}
.cat-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

The visual output is a grid layout of cat images with 3 rows and columns, as shown below:

Install Firefox Developer Edition

Like I mentioned earlier, we will be using the Firefox Developer Edition for our debugging processes. If you don’t have it installed yet, feel free to follow the installation process I’ll demonstrate here:

Visit the official download page
Download the Firefox Developer Edition for your OS and install it on your machine. Next, go ahead and open the HTML project we created at the beginning of the post on a new tab.

Open DevTools

To inspect our project, open it up in your Firefox browser and control-click anywhere on the screen, then select Inspect Element to open up the developer tools terminal.

Debugging with Firefox Devtools

Visualize Grid Containers On a Page With the new features available in Firefox Developer Edition, you can visualize all the grid containers you have on a page. It also gives you a skeletal overlay of the grid itself to better see how elements are positioned in it.

Customize Grid Information on The Overlay

Oh did I mention that you can customize the grid overlay? Well, you can. You can choose to display different properties on the overlay to help you better visualize and debug your grid. Grid line numbers, area names, dimensions and indefinite grid lines are a few things you can toggle their display.

The grid visible grid lines will help us understand where the tracks are, the columns, rows etc are all visible.

Interactive Grid Outlining

Mousing over the grid overlay in dev tools will outline the matching cells on the page to give you an appealing visual representation of your columns and rows while you debug. It also displays the sizes, and positions of different parts of your grid on mouse hover.

Visualize Transformations Applied to Grid Containers

The grid Inspector is capable of visualizing transformations applied on grid containers. If for instance, we decide to transform our grid container by 15 degrees, we get this output:

This is a very handy debugging tool given that sometimes, you have grids that are not just transformed but translated, rotated, skewed etc. In such cases, it will tell you exactly where errors are emerging from if you have any.

Grid Tracks

The columns and rows in a grid are collectively referred to as tracks. Tracks are numbered by the lines that start and stop them as we’ve seen in the previous illustrations. As a result, a grid with 3 columns will have 4 tracks horizontally and vertically.

Implicit and Explicit Tracks

Tacks that are created by the rows and columns defined in the grid are called explicit tracks and are represented in the grid by the thick dashed lines in the grid gap to differentiate them from implicit tracks. It will be hard to visualize, but if we lighten up the background-color of the cat images and zoom in a bit on the grid, we should see the explicit tracks surrounding the cat images:

At this point, our grid container looks like this:

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}

What this means is that we explicitly created rows and columns for the grid. So at the moment, we have all explicit tracks in our grid (a good way to know this is to look at the vertical and horizontal track lines in the grid, you’ll notice that they all look the same). Now if we turn off the rows in dev tools, we’ll almost notice no difference in grid display because of what we call implicit tracks.

Implicit tracks are created by default when you define rows for your grid without explicitly defining the associating columns or vice versa. To visualize this, let’s turn off grid-template-rows: 100px 100px 100px; in dev tools and check the tracks again:

Now if you look closely, you will notice that the horizontal tracks are no longer as tick and visible as the vertical tracks, they are rather faint and dotted. Why? Because now they are just implicit tracks (undefined) in the grid.

Tracking changes

The Firefox dev tools also have a Changes tab where you can track all the changes you’ve made to your project from inception to completion. So far in this post, we’ve mad just about two changes, we changed the background-color and unchecked the box for grid-template-rows. If we switch over to the Changes tab in dev tools, we should see all our changes.

The Firefox dev tools inspector makes it really straightforward to work with CSS grid. You can visualize all your grid data, debug any arising issues, track all your project changes and inspect animations. It is worthy to note once more that these features are not available in all Firefox browser versions, to get these features, you need either the Firefox Nightly version or the Developer Edition.