Wakefly BlogOur Initial Review of Firefox Quantum's DevTools

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.

Inspector

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.

Debugger

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.

Conclusion

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.