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 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.
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.
As if that’s not enough to impress, we also shipped the new, completely redesigned RDM (responsive design mode) in November 2016.
There is no XUL. Only Web.
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.
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.
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
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.
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.
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