DevTools: What you need to know

The end of the year is always very busy, so we wanted to take one final look back at the last months of 2016.

Many things changed in Firefox DevTools last year, particularly towards the end of the year. The effort to refactor some of our tools started to pay off and we landed some great re-designs that should make web developers’ lives easier.

Shiny new tools

We shipped a brand new CSS Grid inspection tool, first of its kind (thank you gabrielluong, helenvholmes, and jensimmons).

We also shipped a brand new, redesigned, console panel. It’s only enabled in Nightly for now, but it’s on track to be enabled everywhere very soon.

A lot of work went into creating Reps, the reusable widgets responsible for displaying all kinds of output in the console. This is great because these reps are shareable components that we’ve already begun to use in many other DevTools.

Thank you to a lot of people, especially contributor nicolaschevobbe, bgrins, Honza, linclark, and others.

Screenshot of the new front-end for the web console panel in firefox

2016 was also the year we shipped our brand new debugger front-end! This was an accomplishment that we can be proud of, that sets the stage for more awesome tool releases in 2017.

I’m personally really excited by the impact we’ve seen since moving this project to GitHub. The beginning of 2017 will be an interesting time for us to experiment with moving even more code to GitHub. I’m already confident that this is the right thing for us to do at this stage, and we have the debugger project to thank for this.

Props go to jasonlaster, jlongster, clarkbw and the debugger github community that has been so great.

Animation showing the new debugger front-end in action in Firefox.

As if that’s not enough to impress, we also shipped the new, completely redesigned RDM (responsive design mode) in November 2016.

Not only do the responsive views look and work better, RDM also comes with major new features like network throttling and more. Thank you to jryans, zer0, gabrielluong.

There is no XUL. Only Web.

2016 was the year when the team actively removed non-standard XUL markup and Firefox-only privileged JavaScript from the tools. In fact, we were able to load the inspector panel in a normal browser tab by end of year, which means that the inspector is now built entirely with HTML and web APIs.

Great work bgrins, juliandescottes, tromey.

The team even went as far as putting in place an npm-based local development workflow so you can build the inspector, open it in a browser tab, make changes and see them in the browser by simply reloading the page!

Moving on to the network panel, thanks to the hard work of Honza, rickychien, steveck, gasolin and contributor jsnajdr, the panel has been almost entirely cleaned of its XUL markup and migrated to React! We now have a new and  more modern code base that I’m sure will be very exciting for people to work with.

Speaking of the end of XUL, tatumcreative eradicated a large piece of old code by re-writing the toolbox tabs using HTML and React.

Inspector gets a refresh

A lot of work went into fixing “paper-cut” bugs – you know, those little (or not so little) annoyances that make it frustrating to use our UI.

A big thank you to ochameau for making the inspector a lot faster and more resilient and to mikeratcliffe for fixing many bugs of the inspector event tooltip.

While I’m covering the inspector, let me mention some other noteworthy new features: css level 4 colors are now supported (thanks jerry and tromey), there are visual hints between closing and opening tags (thanks juliandescottes), text nodes are highlighted (juliandescottes again), and whitespaces in inline layouts are easy to debug (thanks to me 😀).

Random but lovely

Our tools have became a little bit better for RTL (right-to-left) users too, thanks to contributor tomer.

Service worker’s statuses are now visible in about:debugging thanks to juliandescottes.

The animation tooling can display easings thanks to daisuke and birtles.

We’ve also written more React than ever before. I’m very happy that our UI is converging towards one common style. Thank you jlongster for showing us the way!

mikeratcliffe did a ton of work on the storage inspector too, so it works even better with IndexedDB, is able to delete cookies, and more.

Looking ahead

In 2016 we also spent time planning for the future and in particular setting up for the new Performance Tool project.

A lot of talking and design work happened. We are now confident that we’ll be able ship an awesome performance tool that Firefox and web developers will love to use.

Thank you jimb, tatumcreative, ejpbruel, mstange.

Thanks to all who contributed to making DevTools better in 2016. Thank you to all the contributors who helped fix DevTools bugs. I could not mention them all here unfortunately.

Let’s have a great 2017 together!


Source: Mozilla Hacks DevTools: What you need to know