Container Queries and Cascade Layers Get DevTools Support
Container Queries and the :has() pseudo-class have opened up new ways to build responsive components, and CSS Cascade Layers bring order to increasingly complex stylesheets. Tooling support has now caught up with these features.
Safari WebInspector and Chrome DevTools both display the relevant @container at-rule information when you inspect an element and view its CSS in the Styles sidebar. Chrome, Safari, and Firefox also mark which cascade layer a rule belongs to right next to the rule in their respective element inspection tools.
DevTools color editing has expanded too. Chrome and Chromium-based browsers, plus Firefox, now recognize the hwb() color function in autocomplete lists and show the same color swatches they do for other color formats.
CSS autocompletion itself saw meaningful improvements across browsers. Chrome previews variable values when you type var(), not just for colors but for all custom properties, and it surfaces @supports and @scope at-rules in suggestions.
Safari introduced fuzzy matching when autocompleting CSS properties and values, meaning you can type partial names and get results faster. Firefox also now supports the color-mix() function in autocomplete suggestions.
Inactive CSS Detection Expands
Firefox's Inactive CSS feature, which warns you when a CSS declaration doesn't apply to the selected element, has grown more robust. It now covers additional cases, like flagging border-image-* usage on elements inside tables with border-collapse set, or warning when width or height is applied to ruby elements.
Chrome has been developing something similar called CSS authoring hints. The experiment is already available in Chrome and Chromium browsers under Settings (F1) > Experiments in DevTools, and is expected to be enabled by default starting with Chrome 108.
Safari also continues enhanced its layout debugging tools. You now have CSS alignment controls in the Styles sidebar and can inspect Flexbox layouts in the same way you previously could inspect grid.
JavaScript Debugging Improvements
Firefox extended script ignoring beyond just whole files. You can now ignore specific pieces of code, such as a function that gets called repeatedly and clutters your stepping. This works from the debugger just like ignoring an entire third-party source.
Chromium-based browsers saw several debugging upgrades. The Page source tree supports grouping by sourced files — showing the original source via source maps — or deployed files, so you can switch between the code you wrote and what's running on the server.
Live editing while paused is now possible. If you're stopped at a breakpoint inside a function, you can edit its code, save, and the function will restart with the new logic, so you don't restart the whole debugging session for a quick test. Async stack traces are recorded in full, and stack traces automatically ignore known third-party scripts, keeping your own logic front and center.
New Performance Tooling in All Browsers
Chrome introduced a new Performance Insights panel with Chrome 102, designed as an easier entry point than the full Performance panel. It matured significantly since launch, adding metrics for First Contentful Paint, Last Contentful Paint, and Time To Interactive, plus automatic detection of text flashes.
The older Performance panel in Chromium has also gained an Interactions track. It shows when user events happen and how long they last, which is helpful for finding responsiveness problems around input handling.
Edge supplies several performance features of its own. When recording profiles, you can now share them with other people while still showing original function names resolved via source maps.
Memory tooling in Edge got more approachable as well. Heap snapshots now display a summary grouped by node types, so you can quickly see what's consuming memory, and new retainers filters help you spot memory leak sources faster.
Firefox completed the transition to its new performance tool, based on the profiler.firefox.com platform originally built to investigate browser performance. It has since been adapted for web developers, and now fully replaces the old Firefox performance panel.
More Network Debugging Options
Edge adds a Fulfilled by column in its Network tool. This shows whether a request was handled by a service worker, the browser cache, or your server directly — information that's useful for debugging service worker logic in Progressive Web Apps.
Firefox redesigned its Edit and Resend feature in the Network tool. Right-click on a request, choose Edit and Resend, and you'll get a reworked interface for modifying request parameters, headers, and the body before sending.
Safari also includes solid network upgrades: you can now block network requests entirely, and request overrides can be set with regular expressions.
Edge Tools Integration in Code Editors
Microsoft's Edge Tools extension for VS Code gained new capabilities this year. The console and application tools, previously only Elements and Network when it launched, are now embedded in the DevTools view. Log output appears in the DevTools Console directly rather than only CLS.
The embedded browser was redesigned with more emulation controls, including support for emulating different media types, color schemes, and color vision deficiencies. You can also launch the extension from the file explorer by right-clicking an HTML file and opening it. Finally, the Quick Fix mechanism in VS Code can automatically correct some issues that may have been flagged by the extension.
If you use Visual Studio rather than VS Code, there is also now a separate Edge Developer Tools extension available that brings similar capabilities to that editor.
Automated Testing With The Recorder
Browser automation libraries like WebDriver, Puppeteer, and Playwright let you write tests that simulate real user interactions, which helps ensure your scenarios keep working as you ship changes. The WebDriver spec is moving toward a new bi-directional version, and the Chrome DevTools team continues to innovate with the Recorder panel, originally launched last year.
Recent additions to the Recorder include:
- Waiting for elements to become visible and clickable before proceeding with a recording.
- Improved support for element selectors.
- Import and export of recorded flows as JSON.
- Recording of double-click, mouse over, and right-click events.
- Slow-motion and step-by-step replay options.
- Extension support for exporting recordings to formats such as Cypress, WebPageTest, Nightwatch, and WebdriverIO.
Bits And Pieces
Several smaller updates round out the release. Chrome has improved source maps and stack traces for a more reliable debugging experience, so if you normally debug with logs, now could be a good time to try breakpoint debugging instead. Console logs can also be styled with ANSI escape codes.
When editing colors in the Styles sidebar, you can now pick a color from anywhere on your screen. This is powered by the EyeDropper API, which you can also use in your own web pages.
Edge now supports publishing and retrieving production source maps from Azure, which keeps your source code secure while still making it possible to debug issues in production. The team also opened a public feedback repository on GitHub and redesigned the Welcome tool with videos and documentation links.
Firefox’s Compatibility panel now reflects the latest browser compatibility data, so you can spot cross-browser CSS issues while debugging. In the Inspector, you can also disable and re-enable any event listener attached to an element.
Edge’s new experimental Command palette lets you trigger common browser and DevTools commands from a single keyboard shortcut. Press Ctrl+Q to open it (the shortcut was Ctrl+Shift+Space before Edge 108).
Staying Up To Date
DevTools continues to grow, and tracking every change is difficult. These resources can help you discover new features:
- The Chrome DevTools “What’s New” video playlist on YouTube.
- The Edge DevTools “What’s New” video playlist on YouTube.
- The
@FirefoxDevToolsTwitter account for feature announcements. - The WebInspector category on the WebKit blog.
