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 which 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.

 


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.


Optimize Your Website

website optimization image

Related Blogs

An Introduction to ASP.NET and 3 Reasons to Use It

An Introduction to ASP.NET and 3 Reasons to Use It

In the world of website software and application development, there are many frameworks and languages that developers can choose from. Each framework [...]

The Anatomy of a Successful Bank Website Design

The Anatomy of a Successful Bank Website Design

When you think about anatomy, you might picture parts of a body that are all interconnected to form a whole person. A website can also be broken down [...]

Website Development Process – The Timeline

Website Development Process – The Timeline

So what is a “Website Development Process”? The quick definition is: the planning and process you go through to develop a website, from inception to [...]