,

Firefox DevTools Newsletter — 127

Posted by

Developer Tools help developers write and debug websites on Firefox. This newsletter gives an overview of the work we’ve done as part of the Firefox 127 Nightly release cycle.

Performance project

If you’ve been reading us for a bit, you are now well aware that we’re focusing on performance for a few months to make our tools as fast as they can be.

We made displaying rules in the Inspector 5% faster for the common case, and even 600 times faster on pages with very large stylesheets (going from ~3 seconds to ~5 milliseconds in a page using Tailwind)! This was made possible by moving away from our DevTools-specific, JS-written, CSS lexer to a Rust-based implementation. In various places of the codebase, we need to know the different “parts” of a CSS selector, or a property declaration. To have a reliable way of analyzing a given CSS snippet, we use a CSS lexer which computes a sequence of tokens describing the different parts of the snippet. Since this tokenization is actually also done at the CSS engine level when a stylesheet is parsed, as described in the CSS Syntax Module Level 3 specification. We were trying to do the same thing as the engine, and given that we do have access to the engine machinery, it felt silly not sharing the same code. This performance project was a nice opportunity to integrate with the Rust-based implementation the engine is using and ditch our JS-implementation.

Oh my bugs

As temperatures rise in the Northern hemisphere, we’re entering bugs season, and unfortunately, our project isn’t immune to that. First, we identified and addressed a pretty severe race condition that could result in the toolbox not opening at all (#1898490). We also got reports of Debugger crashing (#1891699), as well as issues in the Console when displaying wasm stracktraces (#1888645). Hopefully everything is now working correctly.

If those could be thought of “killer bees” bugs, we also tackle some annoying “midge” bugs:

  • The Network panel could be missing requests made from iframes at the very end of their lifecycle, for example in the unload event (#1887852)
  • When using the node picker, you can hold the Shift key to be able to retrieve elements that are not receiving mouse events (e.g. having pointer-events: none declaration). When using this feature, our heuristic should now better pick the “deepest” element under the mouse (#1889500)
  • Did you know that you could nest @keyframes rule in other at-rules? In such case, we’re now properly detecting the rules, and displaying it in the Rules view, like non-nested keyframes rules (#1894603)
  • Firefox 125 added support for the Popover API, but it wasn’t possible to inspect their ::backdrop pseudo-element, it’s now fixed.
  • Finally, last year, on OSX, we changed the location for screeshots taken in DevTools, from Downloads to Pictures. This was confusing for some people as Firefox Screenshots still put them in the Downloads folder, so we reverted our change.

And that’s it for this months folks, Thank you for reading this and using our tools, see you in a few weeks for a new round of updates 🙂

One response

  1. Mike Ratcliffe Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *