A Firefox DevTools Retrospective
To better understand where we’re headed with Firefox Devtools, let’s take a quick look back.
In 2016, the DevTools team kicked off an ambitious initiative to completely transition DevTools away from XUL and Firefox-specific APIs to modern web technologies. One of the first projects to emerge was debugger.html.
Debugger.html is not just an iteration of the old Firefox Debugger. The team threw everything out, created an empty repo, and set out to build a debugger from scratch that utilized reusable React components and a Redux store model.
The benefits of this modern architecture become obvious right away. Everything was more predictable, understandable, and testable. This approach also allows debugger.html to target more than just Firefox. It can target other platforms such as Chrome and Node.
We also shipped a new Responsive Design Mode in 2016 that was built using only modern web technologies.
Last year, we continued to build on the work that was started in 2016 by building, and rebuilding parts of Firefox DevTools (and adding new features along the way). As a result, our developer tools are faster and more reliable. We also launched Firefox Quantum, which focused on browser speed, and performance.
The debugger.html work that started in 2016 shipped to all channels with Firefox 56. We also added several new features and improvements, including better search tools, collapsed framework call-stacks, async stepping, and more.
Just as with debugger.html, we shipped a brand-new Firefox console with Firefox Quantum. It has a new UI, and has been completely rewritten using React and Redux. This new console includes several new improvements such as the ability to collapse log groups, and the ability to inspect objects in context.
We also shipped a new network monitor to all channels in Firefox 57. This new Network Monitor has a new UI, and is (you guessed it) built with modern web technologies such as React and Redux. It also has a more powerful filter UI, new Netmonitor columns, and more.
CSS Grid Layout Panel
Firefox 57 shipped with a new CSS Grid Layout Panel. CSS Grid is revolutionizing web design, and we wanted to equip designers and developers with powerful tools for building and inspecting CSS Grid layouts. You can read all about the panel features here; highlights include an overlay to visualize the grid, an interactive grid outline, displaying grid area names, and more.
We also did a complete visual refresh of the DevTools themes to coincide with the launch of Firefox Quantum and the new Photon UI. This refresh brings a design that is clean, slick, and easy to read.
2018 and Beyond
All of this work has set up an exciting future for Firefox DevTools. By utilizing modern web technologies, we can create, test, and deploy new features at a faster pace than when we were relying on XUL and Firefox-specific APIs.
So what’s next? Without giving too much away, here are just some of the areas we are focusing on:
Better Tools for Layouts and Design
This is 2018 and static designs made in a drawing program are being surpassed by more modern tools! Designing in the browser gives us the freedom to experiment, innovate, and build faster. Speaking with hundreds of developers over the past year, we’ve learned that there is a huge desire to bring better design tools to the browser.
We’ve been thrilled by overwhelmingly positive feedback around the CSS Grid Layout Panel and we’ve heard your requests for more tools that help design, build, and inspect layouts.
We are making a Firefox Inspector tool to make it easier to write Flexbox code. What do you want it to do the most? What’s the hardest part for you when struggling with Flexbox?
– @jensimmons, 14 Nov 2017
I’m so pleased about this reaction to the Firefox Grid Inspector. That was the plan. We’ve just gotten started. More super-useful layout tools are coming in 2018.
– @jensimmons, 24 Nov 2017
Better Tools for Frameworks
An Even Better UI
The work on the Firefox DevTools UI will never be finished. We believe there is always room for improvement. We’ll continue to work with the Firefox Developer community to test and ship improvements.
New DevTools poll: Which of these three toolbar layouts do you prefer for the Network panel?
More Projects on GitHub
We tried something new when we started building debugger.html. We decided to build the project in GitHub. Not only did we find a number of new contributors, but we received a lot of positive feedback about how easy it was to locate, manage, and work with the code. We will be looking for more opportunities to bring our projects to GitHub this year, so stay tuned.
Have an idea? Found a bug? Have a (gasp) complaint? We will be listening very closely to devtools users as we move into 2018 and we want to hear from you. Here are some of the ways you can join our community and get involved:
Join us on Slack
You can join our devtools.html Slack community. We also hang out on the #devtools channel on irc.mozilla.org
Follow us on Twitter
We have an official account that you can follow, but you can also follow various team members who will occasionally share ideas and ask for feedback. Follow @FirefoxDevTools here.
If you want to get your hand dirty, you can become a contributor:
Download Firefox Developer Edition
Firefox Developer Edition is built specifically for developers. It provides early access to all of the great new features we have planned for 2018.
Thank you to everyone who has contributed so far. Your tweets, bug reports, feedback, criticisms, and suggestions matter and mean the world to us. We hope you’ll join us in 2018 as we continue our work to build amazing tools for developers.
About Dustin Driver
Journalist, tech writer, and video producer helping Mozilla keep the Web open and accessible for everyone.