DevTools is where web developers spend a considerable amount of their time. Millions of people use it every day and it has become an amazingly useful product.

At the same time, it also has become quite complex. So complex that people often only use a subset of its functionalities, depending on the task at hand. It can easily feel overwhelming for people who are only just starting with web development, but even seasoned developers probably don’t know what all the panels in DevTools do.

With that in mind, our team at Microsoft started working on a new feature we call…

In this short article, I am exploring the relationship between two CSS layout features: CSS Grid and CSS Multi-Columns.

These two features can be used together in very interesting ways for building responsive web designs.

Let’s start by reviewing what each of those features do.

CSS columns

CSS has had the ability to organize content into columns for a while now and support is really good all across the board (apart from the need to use vendor prefixes still).

The main use case for CSS columns is to break long sections of text into several columns in order to avoid lines from…

Aligning things in CSS has been a common source of frustration, fun and even memes for a long time. However CSS evolves quickly and new specifications are written and implemented in browsers all the time.
As a result, aligning things in CSS today isn’t quite what it used to be. We now have to take more modern ways to do CSS layout into account, like Flexbox and Grid among other things.

In this post, I’d like to talk about alignment a little bit. What it means in Flexbox and Grid and how to think about it more generally too, so…

I’m probably going to miss some important milestones, but I had fun installing older versions of Firefox tonight and checking what DevTools looked like back then, so let me share some of that with you.

Hopefully this gives you insights into how much things have changed over the years! We tend to take tools for granted and forget how much they evolve to try and satisfy new needs.

The first release

Although the project got officially started during the run up to Firefox 4, somewhere in 2010, the very first version of DevTools I could find shipped with Firefox 10, in January 2012.

As a web developer, you don’t often spend time thinking about white space, right? I mean, how often do they actually matter?
Well, hopefully with this article, you’ll think of them more often, or at least will know when they do matter and know how to track them down!

What is white space?

White space is any string of text composed only of spaces, tabs or line breaks (to be precise, either CRLF sequences, carriage returns or line feeds).

As someone who writes code, you probably know the vital importance of these characters. They allow you to format your code in a way that…

Today, browsers come with built-in tools that allow to inspect and debug existing web content.

In this post, I’ll argue that these tools could also allow creating content and working on this content in more visual ways. Ways that offer alternatives to having to deal with code too much, or rather help you deal with complex code in more intuitive ways.

I think visual tools address 2 specific use cases:

  1. Some people already use web technologies today to prototype, create layouts and design ideas. But browser devtools are often complex and intimidating.
    There is a mismatch between what these people want…

There’s a few ways you can measure elements or distances between elements in Firefox DevTools. In this article, you’ll learn about them and hopefully discover some things which are useful.

Using the rulers

The rulers tool is useful to have around at all times. It provides a way to quickly check how tall or wide a page is, how big are the various columns or sidebars, and how much you’ve scrolled.

The rulers tool is not ON by default, so you have to enable it first. To do this:

  • open the toolbox (I often use ctrl+shift+I as a quick way to toggle the…

This is the French translation of Manuel Rego’s (@regocas) post “Deep Dive into Grid Layout Placement”, published on February 1st, 2016. All images and code samples come from the original article, with the author’s permission.
Translation: Patrick Brosset (

Ceci est la traduction française de l’article “Deep Dive into Grid Layout Placement” par Manuel Rego (@regocas), publié le 1er Février 2016. Toutes les images et extraits de code viennent de l’article original avec la permission de l’auteur.
Traduction: Patrick Brosset (

Le positionnement dans les Grilles CSS

Une revue complète des différentes méthodes de positionnement offertes par les grilles CSS

Manuel Rego
1er Février 2016

Ces derniers mois, dans le cadre de mon travail à Igalia, je me penche…

CSS animations and transitions are awesome, but they’re also hard to get right.
You want your animations to be sequenced a certain way, to last the right amount of time, and to progress at the right pace.

That’s where tooling comes in. What if you could slow down, rewind, or pause your animations anywhere, so that you could inspect the animated elements more easily?

That’s what we started to work on a while back in the Firefox DevTools.
In fact, I already mentioned an earlier version of the animation inspector tool previously (by the way, this article also mentions some of…

If you’re a web developer and you’re interested in open source projects and you commonly use browser devtools in your activities then you might want to read on.

In this article, I’ll go over some of the things that make the Firefox DevTools open source project special, and how those things can make you better at web development.

(If you’re already convinced and just want to get started right away, scroll to the bottom for the list of links)

It feels like Web Development anyway

The whole thing is written as a client-server application. It has a front-end part that’s all written in HTML, CSS and…

Patrick Brosset

🛠 DevTools engineer @Microsoft working on Edge, previously @Mozilla . Opinions my own. he/him.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store