Firefox DevTools Newsletter — 120

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

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

Thanks to Calum Smith who fixed the Inspector to properly display CSS Color 4 formats (for example oklch) (#1859079)

Firefox DevTools Rules view displaying a rule with a color property whose value is `oklch(61.33% 0.264 354.18)`.
A fuchsia preview icon is displayed before the value.

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

Reliable Debugger

This release comes with a few Debugger fixes and tweaks. First, and the most important, we found some tricky issues with the implementation of the variable preview and managed to make it right (#1815472). So if you ever stop using the preview because you felt it was unreliable, give it another go!

We were also aware of buggy behavior when pausing the debugger on unload event and are happy to report that this shouldn’t be broken anymore (#1806796)

When a website uses workers, we display them in the Threads panel of the debugger. It might happen that a thread execution is paused (because of a breakpoint, a debugger statement or an exception if “Pause on Exception” is enabled), but the others are not. We used to only show a very light pause icon next to paused thread, but this could be easily missed, so we changed it to a bolder style with an explicit “paused” label (#1838393)

Firefox Debugger close-up of the threads panel. Four threads are displayed, the Main Thread, and then 3 workers.
The Main Thread is selected, the second thread has a yellow text and brown background and has a "paused" suffix.
The other 2 worker threads are not paused, and are styled as regular threads.

Finally, the Wasm-GC proposal adds many new types and opcodes that can show up in the wasm binary, so we added support for them in the debugger (#1855254)

Pretty Style

The Style Editor makes it easy to read and modify stylesheets. When it detects a minified file, it will automatically pretty print the stylesheet content. There are cases where we fail to detect that a stylesheet isn’t legible, so we added a button in the bottom left corner, like in the Debugger, that will prettify the file when clicked (#1832213).

Firefox Style Editor.
A CSS file is selected, and its content is displayed on the right-hand side.
At the bottom of the screen, a pink arrow points to the pretty-print button, located in the bottom left corner of the CSS file editor.

Improving DevTools Accessibility

A few months ago, the accessibility team at Mozilla ran an audit of the most used panel in DevTools and handed us over a list of the accessibility issues they found. We’re now in the process of fixing those issues, which will span multiple Firefox releases, and will hopefully make our tools more accessible. We started with the low hanging fruits which can be put in a few categories:

A combination of all of those went into fixing issues on the event listeners tooltip (#1843328, #1843330, #1843331), which should be properly keyboard and screen reader accessible now.

This is just the beginning of the project and more fixes and changes are coming in future releases. If you’re curious, check the full list of bugs we plan to fix during this project.

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

Leave a Reply

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