Posted on 10/24/2017 in Web Development

By Steve Karrmann

Announced late last year, Project Quantum is Mozilla's faster-modernized web engine for its Firefox browser. We are days away from Firefox Quantum's official release. Firefox Quantum Developer Edition is already available for desktop, and it adds UI and feature improvements to Firefox's DevTools. Here are new DevTools features that have us excited for this release, as well as some improvements we would like to see.


The Inspector's Layout panel now has a CSS grid feature. It detects all occurrences of CSS grids on the current page and provides a graphical overlay grid for observing and analyzing their display details. This will be an indispensable visual aid when unraveling the interpretation of complex CSS grid definitions. Check out this feature against Mozilla's CSS grid demo. It is superbly convenient to see each grid element's position as dictated by the layout, and navigating to these element's rules for on-the-fly style testing is just a click away!

Modern browser support for CSS variables has arrived, and Inspector welcomes it. The Rules panel now shows the value for a CSS variable when you hover over it. This is a small feature, but it saves us the effort of looking up the variable definitions within the CSS file. It's not perfect yet however; DevTools does not automatically update the displayed value when the variable is dynamically updated. Head on over to this Custom CSS properties demo and test it yourself.

Developers who rely on XPath (we use it for HTML scraping with Html Agility Pack) will be pleased that XPath expressions for elements are now easily available. In Inspector, just right-click on an element and select "Copy > XPath". Both Firebug and Chrome already supported this, so in this case, Firefox's DevTools is just catching up with its past and current competitors.


In addition to its familiar Sources view for browsing JavaScript sources, the Debugger now introduces an Outline view for listing and navigating to functions. This allows us to jump directly to function definitions, but it has limitations and falls short when compared to editor/IDE outline capabilities. The Outline view no longer works if you "pretty print" the source, so production code without source maps cannot leverage this feature. It only outlines functions too: it would be great if it outlined newer JavaScript structures, such as classes and modules.

Code breakpoint handling is cleaner and smarter. Breakpoints are now tracked in the abstract syntax tree (AST), so your breakpoints are preserved on the correct lines even when the source code is modified. Whereas older versions of Firefox crammed your pinned breakpoints under the Sources menu, they are now listed in a dedicated "Breakpoints" accordion on the right-hand pane. Firefox took a lesson from Chrome DevTools here, both in breakpoint handling and this UI change.

Network Monitor

The Network panel introduces over ten new columns for filtering and sorting network requests, including download start/end times, scheme, and many response headers. The response headers might be the most practical, as it can help detect suboptimal cache settings on content delivery servers. Firefox Quantum's UI overhaul is beautifully represented here. Detailed information behind each network request is cleanly displayed, and the smooth experience of refining results and inspecting individual requests within the same application layout is far above other browsers.

A nice touch is the MDN documentation integration. A "?" icon appears next to standard headers and status codes, and clicking on them navigates to the Mozilla web docs documentation for that topic. Connecting this documentation to the appropriate context gives us all an opportunity to learn while debugging. I already rely on Mozilla's documentation as one of my first research destinations, so this convenience feature just saves a step when navigating to their documentation.


The performance improvements provided by Firefox Quantum might persuade web users to give Firefox another chance, and for developers, its DevTools are catching up to Chrome's. Some features still feel experimental (such as the Debugger's outline), but it shows Mozilla's willingness to pioneer. The majority of past DevTools deficiencies have been resolved, and the speed and presentation overhauls provide a stellar experience.

Firefox Quantum has not surpassed Chrome in all cases, although they might be on equal footing for the first time since Chrome's launch. Firefox Quantum is a viable contender for best frontend testing and debugging experience - I will gladly use it as my primary browser.


Looking for assistance maintaining your current website?

Wakefly offers flexible retainer options that take the pain out of website maintenance. We act as an extension of your team to handle anything from resolving existing issues to adding new content and functionality to your site.

Related Articles

Demystifying SPF, DKIM and DMARC: Strengthening Email Security

Demystifying SPF, DKIM and DMARC: Strengthening Email Security

With Slack and other instant messaging services handling more and more of our online communication, email can sometimes feel like a newspaper being [...]

Elevating Your Brand: The Transformative Power of Website Design

Elevating Your Brand: The Transformative Power of Website Design

In the digital age, your website is often the first point of contact between your brand and potential customers. It's not just a platform to showcase [...]

Navigating the Digital Landscape: Website Design Trends of 2024

Navigating the Digital Landscape: Website Design Trends of 2024

In the ever-evolving realm of digital innovation, website design trends serve as the compass guiding businesses and creators toward impactful online [...]