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

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

• Gregory Pappas removed the now unused devtools.markup.mutationBreakpoints.enabled pref (#1574540). This preference was used to control DOM Mutation Breakpoints, but they are now always enabled.

A DOM Mutation Breakpoint will pauses the code when the DOM node on which you have set the breakpoint is modified. The documentation contains further information on how to use them and how they can help you.

• Vinny Diehl improved the measuring tool by making it possible to resize the selected area with the keyboard arrow keys (#1262782)

Once you draw the measuring rectangle, you can now move it around with the arrow keys to perfectly align to what you want to measure. You can also change the width and height of the overlay by holding the Ctrl key (Cmd on OSX). Holding Shift will make it move/resize faster. You can read more about the measuring tool in the dedicated documentation page

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

---

CSS Nesting

In 117, Stylo — Firefox CSS engine — adds support for CSS Nesting, a long wanted feature by web developers (some variations of nesting were introduced a long time ago in pre-processed CSS language like SASS).

So what you may have written like this:

button.action {
  color: tomato;
}

button.action:hover {
  color: gold;
}

@media (width < 500px) {
  button.action {
    font-size: 16px;
  }
}

could now be written like this instead:

button.action {
  color: tomato;

  &:hover {
    color: gold;
  }

  @media (width < 500px) {
    & {
      font-size: 16px;
    }
  }  
}

I encourage you to read the specification for nesting which isn’t too long and is very well written: https://www.w3.org/TR/css-nesting-1/

CSS nesting has a pretty big impact on DevTools, specifically, but not only, in the Rules view. In order to make it easier to identify rules, we are showing all the ancestor rules, and adding indentation, opening and closing brackets so it’s similar to the CSS you wrote (#1838803).

Compatibility Tooltip

Web compatibility inspection has been enhanced with our new CSS compatibility tooltip in the Developer Tools Inspector (#1840775). An icon is now displayed next to properties that could lead to web compatibility issues. When hovered, the tooltip indicates which browsers are not supported and displays a link to the MDN page for the property so you can learn more about it.

We’re only checking property names at the moment, but we plan to also show this tooltip for unsupported property values (#1636301)

More Inspector goodies

Did you know that highlight pseudo-elements (for example: ::selection) can only be styled by a limited set of properties that do not affect layout (see specification)? The properties that don’t have any effect will now be marked as such in the Rules view (#1842157)

We also fixed a strange issue where the last item in custom property fallback list was hidden if used on font-family property (#1842314)

Network Proxy

You can now see HTTP Proxy information in the Network Headers panel (#1707192)

Do Not Clear

Finally, console.clear() won’t clear the console output anymore when the “Enable persistent logs” setting is enabled (#1267856), which matches Chrome DevTools behaviour.

---

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