Firefox Developer Experience

Firefox DevTools Newsletter — 136

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 136 release cycle.

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

  • like Karan Yadav who fixed the box model dimensions for element with display:none (#1007374), made it possible to save a single Network request to HAR (#1513984) and fixed the “offline” setting in the throttling menu or the Responsive Design Mode (#1873929).
  • Meike [:mei] added the pt unit in the Fonts panel (#1940009)

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

Highlights

  • Show profile details in the network throttling menu items (#1770932)
  • Throttling menu in Network monitor. The different throttling simulations indicate the download, upload and ping data being simulated (for example, for GPRS, it says download 50kbps, upload 20Kbps, ping 500ms)
  • The JSON Viewer is parsing the JSON string it’s displaying, which was causing some troubles when some values can’t be accurately parsed in JS (for example, JSON.parse('{"large": 1516340399466235648}') returns { large: 1516340399466235600 }). In such case, we now properly show the source value, as well as a badge that show the JS parsed value to avoid any confusion (#1431808)
  • Firefox JSON viewer showing a JSON file with multiple items, some of them having a special badge prefixed with JS. For example, there's a `big: 1516340399466235648` property, and next to it a badge with: `JS:1516340399466235600` A tooltip is displayed with the text: "Javascript parsed value"
  • Links to MDN were added in the Network Monitor for Cross-Origin-* headers (#1943610)
  • We made the “Raw” network response toggle persist: once you check it, all the request you click on will show you the raw response (until you uncheck it) (#1555647)
  • We drastically improved the Network Monitor performance, especially when it has a lot of requests (#1942149, #1943339)
  • A couple issues were fixed in the Inspector Rules view autocomplete (#1184538, #1444772), as well as autocomplete for classes with non-alpha characters in the markup view search (#1220387)
  • Firefox 132 added support for CSSNestedDeclarations rules, which changed how declarations set after a nested declaration were handled. Previously, those declarations were “moved up”, before any nested declarations. This could be confusing and the specification was updated to better align with developers expectations. Unfortunately, this caused a few breakages in the Inspector when dealing with nested rules; for example when adding a declaration, those would appears twice and wouldn’t be placed at the right position. This should now be behaving correctly (#1946445), and we have a few other fixes coming around nested declaration.
  • We fixed an issue that was preventing to delete cookies with Domain attributes (#1947240)
  • Finally, after many months of hard work, we successfully migrated the Debugger to use codemirror 6 (#1942702)

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 136 release:

Nicolas Chevobbe

Leave a Reply

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