A quick history of Firefox DevTools

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.
It looked like this:

It had no concept of a toolbox (the thing usually at the bottom of the browser that contains all the tools). Instead, it sort of surrounded the browser window with various panels.

It had an HTML panel, a CSS panel (for both CSS rules and computed properties), a web console, and even a scratchpad window:

The 3D view!

Still 2012, jumping forward 6 months to Firefox 14, we got a 3D view!

Around the same time, the Style Editor panel appeared, which allowed to edit authored style sheets, add new ones, save them to disk, and visualize the changes in the browser immediately. Since there was no concept of toolbox yet, there was no place to put it around the viewport anymore, so it got its own window:

Moar tools!

Jumping ahead some more, end 2012, Firefox 17, we had so many new tools:

A new script debugger panel:

Our very first Responsive Design Mode:

The Developer Toolbar, a command line interface right into the browser, to launch common developer tasks, first of its kind:

And even a dark theme for the element inspector!

The apparition of the Toolbox

Let’s go faster now and jump to mid-2013, which is when I joined the Mozilla DevTools team.

Looking at Firefox 22, we finally had a toolbox! Meaning a unique panel that could be either docked at the bottom or right of the browser window, or opened in its own separate window, and that would contain all of our tools:

You can see that the project was also picking up a lot of momentum, with many new tools being added:

• The Fonts sidebar panel
• The Box Model sidebar panel
• A brand-new Profiler tool
• And a paint-flashing tool which made it easy to see when parts of the page were being re-painted by the browser engine:

Core tools, and niche tools

Let’s jump to Firefox 30, mid-2014, so one year later.

The first thing you’ll notice is the theme was getting more polished, there was more consistency throughout the toolbox.

Also we had a much more complete tool offering: a console, an inspector, a debugger, and a new network monitor.

These are the basic tools you’d expect any browser to have, right?
I mean, nowadays, people use much more than this: performance tools, storage inspectors, service workers debugging, etc. but the very core tools were there.

You could split the console too, so you could see it at the same time as other panels.

We also got the on-hover highlighter, which I’m very grateful to have had the opportunity to work on (before that, the highlighter would be always-on, getting in the way when looking at the page):

But around that time, we also started to invest in providing more niche tools for people building cool stuff with less common web technologies like WebGL. One such tool was the Shader Editor:

An explosion of tools

Continuing our journey at about the same speed, we’re now mid-2015, Firefox 39 just shipped. At around that time. we had hit an all-time high in terms of number of different tools:

We had:

• Our usual core tools: inspector, console, debugger, style-editor, network.
• We got a brand new Storage panel that displayed local data such as cookies and local storage.
• 3 creative tools: the Shader Editor we saw previously, to see and edit WebGL shaders, a Canvas Inspector, to profile canvas context draw operations, and a Web Audio tool to visualize Web Audio nodes currently added to the page.
• And finally, a brand new performance panel, the Timeline, which was to become our new all-in-one performance tool.

Here’s what the Web Audio and Canvas tool looked like respectively:

These tools have, unfortunately, changed very little (if at all). Indeed, these are tools that fewer people tend to use and, even if they are crucial to a few users, they can’t be served effectively by our small team. So these screenshots are still very much current.

The new timeline tool was also really novel. The concept was that it would show you the performance of a web page while recording it! So you would see performance markers live:

Fun fact: I contributed to creating this new panel, and did my first ever change involving C++ back then. This was really intimidating, but being mentored by someone helped a lot!

But, far more importantly, at that time we also had a really cool looking dark theme:

Designer tools

Fast forward to last year, mid-2016, and Firefox 47. There had been a real focus on adding more designer-oriented tools, like measurement tools, animation tools, screenshot tools, color pickers:

But another tool also made its debut around that time: the memory panel. It allowed you to take a snapshot of the memory Firefox was using for your page and do all sorts of useful analysis on it:

Alright, we got all the way from 2012 to last year, we could keep on going but that would bring us to now, and that’s not as fun as looking at old versions of stuff you’ve worked on or used, right? So let’s stop here (also, it’s way too late here).

Just for fun, here’s an animation showing how the toolbox looked through the years, from Firefox 22 to Firefox 55:

I hope you had as much fun as I have looking at these!