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 122 Nightly release cycle.

Firefox being an open source project, we are grateful to get contributions from people outside of Mozilla, like AAR.dev, who fixed a typo in the Profiler settings page (#1865895).

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

---

Accessibility

As said in previous newsletters, we worked on accessibility issues across the toolbox, and fixed a few of them in this release. First, there was a big focus in the Inspector view to make sure that various elements are all accessible and can activated using only the keyboard:

• the checkbox to disable/enable a property (#1844055)
• the selector highlighter icon (#1844053)
• the button to show rules containing a given property (#1844058)
• the expandable containers like Pseudo elements, keyframes, … (#1866986)
• the new CSS property edit control (#1844057)
• the toggle buttons in top toolbar (:hov, .cls, print and dark/light mode simulation) (#1844061)
• the grid highlighter color picker (#1844072)

While working on keyboard navigation in the Rules view, we felt like we could revisit the behavior of the Enter key when editing selector,property name or value. Since we know this is an important change, we write a specific blog post to explain our motivation behind it: https://fxdx.dev/rules-view-enter-key/

Finally, we fixed remaining focus indicator (#1865846, #186608) and color contrast issue (#1843332), as well as properly labelled the button to toggle object properties in the console and debugger (#1844088)

This project is coming to an end, but we’ll likely have another project later this year to take care of remaining, especially in tools we didn’t investigate yet, like the Network panel.

Miscellaneous

Did you know that the console exposes two helper functions, $ and $$ ? They are similar to document.querySelector and document.querySelectorAll, the only difference being that $$ returns an array, while document.querySelectorAll returns a NodeList. Now those two helpers are eagerly evaluated, making it easier to query a specific element as you get feedback about matching elements as you’re typing (#1616524)

You can now set beforeunload and unload event listener breakpoints in the Debugger which should be pretty useful when investigating navigation/reload issues (#1569775).

The total transferred size in the Network Monitor does not include service worker requests any more (#1347146).

We fixed  fews issues in the Inspector. First, we weren’t able to load stylesheet text, which could occur in projects using Vite (#1867816). We also introduced a bug in the Inspector markup view in 121, which was causing single click to activate URLS in element attributes (e.g. the src attribute on <img> elements) (#1870214). Finally, using the the clip path editor could cause the value in the Rules view to be invalid (#1868263).

Thank you for reading this and using our tools, see you next month for a new round of updates 🙂