Firefox Developer Experience

Firefox DevTools Newsletter — 137

Posted by

Nicolas Chevobbe

–

,

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 137 release cycle As always, I’m quite late writing these updates, but better late than never, so here we go 🙂

Firefox being an open source project, we are grateful to get contributions from people outside of Mozilla:

Firefox inspector markup view. A search input is filled in with "button", a label next to it indicates that the current search result is the second out of 27. Next to this label, there are two icons, to navigate to respectively the previous and the next result (the tooltip for the second button indicates "Next result")

Want to help? DevTools are written in HTML, CSS and JS so any web developer can contribute! Read how to setup the work environment and check the list of mentored issues

Network Monitor

Julian added a new feature for the Network Monitor: network response override (#1849920). You can check the nicely detailed blog post we wrote about it: https://fxdx.dev/network-override-in-firefox-devtools/ . TL;DR: you can override any network request with a local file, which can be very handy when you need to fix something while not having the ability to modify the file on the server.

Hubert added early hint headers in the headers panel (#1932069)
Julian added a new feature for the Network Monitor: network response override (#1849920). You can check the nicely detailed blog post we wrote about it: https://fxdx.dev/network-override-in-firefox-devtools/ . TL;DR: you can override any network request with a local file, which can be very handy when you need to fix something while not having the ability to modify the file on the server.

Hubert added early hint headers in the headers panel (#1932069)

A new section in Netmonitor Headers sidebar, whose title is "Early Hints Response Headers", with the size of said Headers (339 B) There are 3 headers displayed : link, original-trial and X-Firefox-Spdy

The Early hints response headers section shows the headers provided by HTTP 103 informational response. For each line in the early hints response headers section, a question mark links to the documentation for that response header, if one is available.


In some cases, subsequent cached requests for scripts would not appear in the list of requests, this is now fixed (#1945492)

Finally, following what we did in Firefox 136 in the JSON Viewer, the Netmonitor Response sidebar will show the source value, as well as a badge that show the JS parsed value for values can’t be accurately parsed in Javascript (for example, JSON.parse('{"large": 1516340399466235648}') returns { large: 1516340399466235600 }) (#1942072)

Debugger

There was a bug in the variable tooltip where it wasn’t possible to inspect a variable properties (#1944408). This is now fixed, and in general, the tooltip should be more reliable (#1938418). We also fixed a couple issues for navigating to function definition from the tooltip (#1947692, #1932021)

Inspector

You might now know (I definitely didn’t), but font files contains very handy metadata like the font version, designer URL, license information, …
We’re now displaying those in the Fonts panel (under the “All Fonts on Page” section) so you can find other awesome fonts from the designer of a font you like for example.

In Firefox DevTools fonts panel, in the "All Fonts on Page" section, the "Mozilla Headline" font is being used, and some new informations are now visible (e.g. Version: 0.100, Designer: Studio DRAMA, …)

CSS Nesting usage is on the rise, and with that, we’re getting reports of issues in the Inspector, especially since the change in the specification that resulted in the addition of CSSNestedDeclarations rules. In 137, we fixed a couple issues:

  • Declarations after nested rule were displayed (incorrectly) in their parent rule (#1946445)
  • Adding a declaration in the Rules view would add it after any nested declaration (#1954704)

We know we still have other issues with those CSSNestedDeclarations (#1946439, #1960123, #1951605) and we’re actively working on fixing them.

Misc

We made the search feature in the Style Editor much more usable; you can now hit Enter multiple time to navigate through the results in the stylesheet (#1846465).

Finally, we fixed an important issue that could lead to blank screen when using about:debugging to inspect a page in Firefox for Android (#1931651)

That’s it for this month, thank you for reading this and using our tools, see you in a few weeks for a new round of updates 🙂

Full list of fixed bugs in DevTools for the Firefox 137 release:

Nicolas Chevobbe

Leave a Reply

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