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

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

• Rubicon [:rubicon] made rotating the “device” in Responsive Design Mode actually fire a change on window.screen.orientation (#1755647)
• Abhijeet Chawla[:ff2400t] migrated even more of our React code away from deprecated method (#1810436, #1810438, #1810439, #1810460, #1810464, #1810468, #1810481)
• Sebastian Zartner [:sebo] added a warning in the Inspector when content-visibility is used on elements for which size containment doesn’t apply (#1901985)

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

• You can now navigate the Debugger call stack panel using the keyboard up/down arrow keys (#1843324)
• We added an option in the Debugger so you can control whether WebExtensions scripts should be visible in the sources tree (#1413872, #1933194)

• Did you know that you can set a name for Workers? The threads panel in the Debugger will now use this name when it’s defined for a worker (#1589908)
• We fixed an issue where the Preview popup wouldn’t show the value for the hovered expression (#1941269)
• File and data URI requests are now visible in the Network Monitor (#1903496, #972821)
• The partition key for CHIPS cookies is now displayed in the storage panel (#1895215)
• You probably know that the WebConsole comes with nice helpers to interact with the page. For example $$() is kind of an alias for document.querySelectorAll() (except it returns an Array, while the latter returns a NodeList). In Firefox 135, we added a $$$() helper which will returns element matching the passed selector, including elements in the shadow DOM.
• Finally, we improved the stability of the toolbox, especially when your machine is under heavy load (#1918267)

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

• Rubicon [:rubicon] RDM doesn’t fire change event of screen.orientation (#1755647)
• Abhijeet Chawla[:ff2400t] Stop using UNSAFE_componentWillReceiveProps in devtools/client/shared/components/SearchBoxAutocompletePopup.js (#1810436)
• Abhijeet Chawla[:ff2400t] Stop using UNSAFE_componentWillReceiveProps in devtools/client/responsive/components/ViewportDimension.js (#1810438)
• Abhijeet Chawla[:ff2400t] Stop using UNSAFE_componentWillReceiveProps in devtools/client/responsive/components/UserAgentInput.js (#1810439)
• Abhijeet Chawla[:ff2400t] Stop using UNSAFE_componentWillReceiveProps in devtools/client/inspector/fonts/components/Font.js (#1810460)
• Abhijeet Chawla[:ff2400t] Stop using UNSAFE_componentWillMount in devtools/client/inspector/animation/components/PauseResumeButton.js (#1810464)
• Abhijeet Chawla[:ff2400t] Stop using UNSAFE_componentWillReceiveProps in devtools/client/inspector/animation/components/AnimationItem.js (#1810468)
• Abhijeet Chawla[:ff2400t] Stop using UNSAFE_componentWillMount in devtools/client/accessibility/components/AuditController.js (#1810481)
• Sebastian Zartner [:sebo] [Inactive CSS] Display a warning when ‘content-visibility’ is used on elements for which size containment doesn’t apply (#1901985)
• Sandor Molnar[:smolnar] Intermittent devtools/client/inspector/fonts/test/browser_fontinspector_all-fonts.js | single tracking bug (#1919451)
• Tooru Fujisawa [:arai] Update obsolete comments around JSM in devtools (#1934044)
• Tooru Fujisawa [:arai] Update document not to use JSM-based API in devtools (#1934056)
• Tooru Fujisawa [:arai] Update the filename in the spinEventLoopUntil label in devtools (#1934077)
• Tooru Fujisawa [:arai] Unnecessary lint eslint-disable in worker-loader.sys.mjs (#1934690)
• Cosmin Sabou [:CosminS] Perma [tier 2] devtools/client/debugger/test/mochitest/browser_dbg-preview-frame.js | single tracking bug (#1936666)
• Henrik Skupin [:whimboo][⌚️UTC+2] [DevTools Release Tasks – Cycle 135] Update MDN data for the Compatibility panel (#1937740)
• Alexandre Poirot [:ochameau] Implement UI for switching context to content script (#1413872)
• Alexandre Poirot [:ochameau] The Worker name should be reflected in the threads pane (#1589908)
• Alexandre Poirot [:ochameau] Intermittent devtools/client/framework/browser-toolbox/test/browser_browser_toolbox_l10n_buttons.js | single tracking bug (#1767784)
• Alexandre Poirot [:ochameau] Intermittent devtools/client/framework/test/browser_toolbox_many_toggles.js | single tracking bug (#1904733)
• Alexandre Poirot [:ochameau] DevTools can’t be opened when any of the tabs is having an infinite loop (#1918267)
• Alexandre Poirot [:ochameau] Perma Windows devtools/client/debugger/test/mochitest/browser_dbg-javascript-tracer-sidebar.js | The key event adds two elements in the tree. The DOM Event and its top frame – Got 7, expected 8 (#1929934)
• Alexandre Poirot [:ochameau] Improve target names displayed when debugging a Web Extension (#1933194)
• Alexandre Poirot [:ochameau] Skip breakpoint setting is reset on reload (as soon as there is at least one breakpoint) (#1933764)
• Alexandre Poirot [:ochameau] Remove debugger node tests (#1933832)
• Alexandre Poirot [:ochameau] Frequent devtools/client/inspector/test/browser_inspector_iframe-picker-bfcache-navigation.js | single tracking bug (#1934666)
• Alexandre Poirot [:ochameau] Show worker alongside their related document in the evaluation context selector (#1935025)
• Alexandre Poirot [:ochameau] Restore `threadGrip` method of paused object actors (#1935473)
• Alexandre Poirot [:ochameau] Use distinct connection for watcher actors using a shared connection (#1936300)
• Julian Descottes [:jdescottes] Data URI’s not listed anywhere in network monitor (#972821)
• Nicolas Chevobbe [:nchevobbe] Intermittent devtools/client/inspector/animation/test/browser_animation_animation-target_highlight.js | single tracking bug (#1767697)
• Hubert Boma Manilla (:bomsy) Add up/down arrow navigation in call stack (#1843324)
• Nicolas Chevobbe [:nchevobbe] Intermittent devtools/client/inspector/rules/test/browser_rules_layer.js | single tracking bug (#1845152)
• Hubert Boma Manilla (:bomsy) Stop using the parser worker for determining JSX and typescript jsx (#1873657)
• Hubert Boma Manilla (:bomsy) Migrate from the parser worker `findBestMatchExpression` to use lezer for matching expressions (#1874656)
• Nicolas Chevobbe [:nchevobbe] Add a new field in Cookies to display partitionKey for CHIPS cookies (#1895215)
• Nicolas Chevobbe [:nchevobbe] Provide a console tool to easily search the page including the shadow roots (#1899558)
• Julian Descottes [:jdescottes] Show requests for file urls loaded by the page (images, stylesheet, script) (#1903496)
• Nicolas Chevobbe [:nchevobbe] Retrieve and handle cookies from both unpartitioned and partitioned cookie jars (#1907570)
• Nicolas Chevobbe [:nchevobbe] Repeat bubble looks odd in High Contrast Mode (#1916327)
• Nicolas Chevobbe [:nchevobbe] Style of Pressed/active buttons in toolbox toolbar isnt’ distinct from regular style in High Contrast Mode (#1916350)
• Nicolas Chevobbe [:nchevobbe] Markup view “scroll” highlighting doesn’t work in High Contrast Mode (#1916649)
• Nicolas Chevobbe [:nchevobbe] Color picker panel items don’t adapt well to High Contrast Mode (#1916661)
• Nicolas Chevobbe [:nchevobbe] Rules view filter input “no match” style don’t adapt to High Contrast Mode (#1916666)
• Nicolas Chevobbe [:nchevobbe] Rules view flex toggle color doesn’t adapt to High Contrast Mode (#1916677)
• Nicolas Chevobbe [:nchevobbe] Rules view bezier swatch toggle doesn’t adapt to High Contrast Mode (#1916680)
• Nicolas Chevobbe [:nchevobbe] Rules view angle swatch doesn’t adapt to High Contrast Mode (#1916683)
• Nicolas Chevobbe [:nchevobbe] Rules view linear swatch toggle doesn’t adapt to High Contrast Mode (#1916692)
• Nicolas Chevobbe [:nchevobbe] Rules view filter toggle doesn’t adapt to High Contrast Mode (#1916694)
• Julian Descottes [:jdescottes] Intermittent devtools/client/inspector/fonts/test/browser_fontinspector_theme-change.js | single tracking bug (#1919420)
• Julian Descottes [:jdescottes] Intermittent devtools/client/dom/test/browser_dom_fission_target_switching.js | single tracking bug (#1928243)
• Hubert Boma Manilla (:bomsy) Intermittent devtools/client/webconsole/test/browser/browser_webconsole_location_logpoint_debugger_link.js | single tracking bug (#1929808)
• Nicolas Chevobbe [:nchevobbe] Highlighted shorthand declaration expand arrow doesn’t have the right color in High Contrast Mode (#1932608)
• Nicolas Chevobbe [:nchevobbe] Filter toggle buttons (console, netmonitor) don’t adapt to High Contrast Mode (#1932625)
• Nicolas Chevobbe [:nchevobbe] Enable devtools.high-contrast-mode-support on Nightly (#1932642)
• Julian Descottes [:jdescottes] Network event should not be emitted for data-uri triggered by layout/res/html.css (#1932818)
• Nicolas Chevobbe [:nchevobbe] inline preview doesn’t work on scripts using explicit resource management (with the `using` keyword) (#1933139)
• Nicolas Chevobbe [:nchevobbe] Getter/setter/prototype items arrows have a different color than regular items (#1933401)
• Julian Descottes [:jdescottes] Remove the empty box-shadow around focused tab (#1933466)
• Nicolas Chevobbe [:nchevobbe] Unmatched rules have lower opacity which causes contrast issues (in both regular and High Contrast Mode) (#1933651)
• Nicolas Chevobbe [:nchevobbe] Rules view active shape editor point hover text isn’t legible in High Contrast Mode (#1933653)
• Nicolas Chevobbe [:nchevobbe] SuppressedError are logged as “Error” and don’t have the error message (#1933739)
• Nicolas Chevobbe [:nchevobbe] Migrate error jest test to a mochitest (#1933905)
• Nicolas Chevobbe [:nchevobbe] Event tooltip Bubbling badge isn’t legible in High Contrast Mode (#1934237)
• Nicolas Chevobbe [:nchevobbe] Source tabs don’t adapt to High Contrast Mode (#1934252)
• Julian Descottes [:jdescottes] Inspector breaks when opened after an XML file with an invalid embedded XSLT has been shown (#1934520)
• Nicolas Chevobbe [:nchevobbe] Disabled breakpoint don’t have distinct style in CodeMirror 6 (#1934777)
• Julian Descottes [:jdescottes] Data URIs should have a valid Size column in netmonitor (#1934878)
• Hubert Boma Manilla (:bomsy) Remove the Codemirror 6 preference in the debugger (#1935101)
• Nicolas Chevobbe [:nchevobbe] Add a test for Tab keyboard navigation (#1935178)
• Nicolas Chevobbe [:nchevobbe] Use actual button for accordion toggle – Frequent a11y devtools/client/inspector/fonts/test/browser_fontinspector_all-fonts.js | single tracking bug | Node is not accessible via accessibility API: id (#1935499)
• Julian Descottes [:jdescottes] [DevTools Release Tasks – Cycle 135] Remove backward compatibility code (#1936226)
• Hubert Boma Manilla (:bomsy) Perma [tier 2] devtools/client/debugger/test/mochitest/browser_dbg-pretty-print-flow.js | single tracking bug (#1936508)
• Hubert Boma Manilla (:bomsy) Perma [tier 2] devtools/client/debugger/test/mochitest/browser_dbg-debug-line.js | single tracking bug (#1936510)
• Nicolas Chevobbe [:nchevobbe] Menu item don’t have the right color when they’re hovered (#1936829)
• Hubert Boma Manilla (:bomsy) Perma devtools/client/debugger/test/mochitest/browser_dbg-call-stack.js | The location is correct – Got “frames.js:3”, expected “frames.js:8” (#1937086)
• Nicolas Chevobbe [:nchevobbe] Perma devtools/client/inspector/compatibility/test/browser/browser_compatibility_css-property_issue.js | Test timed out – (#1940196)
• Nicolas Chevobbe [:nchevobbe] Update compatibility tests so they still pass with updated browser data (Safari 18.2) (#1940751)
• Hubert Boma Manilla (:bomsy) preview popup doesn’t show the value of the hovered token (#1941269)