DevTools Across Browsers: New Features Worth Testing
In any browser, Developer Tools are complex pieces of software. Dozens of panels are available, most hidden behind menus, and new features land faster than most developers can track. It is no wonder that many settle into familiar workflows and stop noticing what has changed. But the teams behind Chrome, Edge, Firefox and Safari have shipped a steady stream of genuinely useful improvements over the last year. Some exist to make CSS layouts easier to inspect, others simplify everyday interactions with the tools themselves. This is a tour through the most practical additions.
Easier CSS Debugging in Chrome
Chrome DevTools has been undergoing quiet modernization — migrating to TypeScript, refactoring with WebComponents and rebuilding the theme infrastructure. Alongside this internal work, user-facing capabilities related to CSS debugging have shipped.
Scroll-Snap Inspection
CSS scroll-snapping lets developers control where a scrolling container stops. Typically, two properties drive the behavior: scroll-snap-type, which defines the direction and snapping method, and scroll-snap-align, which determines the snap position of items.
In the Elements panel, an element using scroll-snap-type now receives a scroll-snap badge. Clicking it triggers an overlay that highlights:
- the scroll container itself;
- the items scrolling inside it;
- the exact alignment positions, marked with blue dots.
This makes it far easier to verify how snapping behaves, especially when items lack backgrounds and item boundaries are subtle. Given that scroll-snapping adoption sits below 4% and the specification has changed, cross-browser support varies widely. A tool that makes functionality visible and tangible could nudge more developers to test and adopt the feature.
Container Query Support Begins to Appear
Container queries are among the most requested CSS features in recent memory. They allow elements to alter their own layout and styles based on the container they live in, instead of the viewport — a crucial ability for component reuse. Chromium's support for the feature is not enabled by default yet — it requires flipping the "container queries" flag in chrome://flags. DevTools support remains early-stage, but a few useful pieces have landed.
- A
@containerat-rule that applies to the currently selected element now shows in the Styles sidebar of the Elements panel. This stylistic presentation matches how media query styles appear, offering a quick answer as to where a rule came from.
- Hovering over the container at-rule reveals an inline link to the matched element, with more details on its sizing. Hovering that link displays live dimensional information for the element, making it clear why the query matched in the first place.
Chromium Collaboration: Shared Tools, Shared Building Blocks
Chrome, Edge, Brave and others are built on the open-source Chromium project. The contributions of two primary companies — Google and Microsoft — are the most visible in DevTools. In recent years, these two groups have worked together on several important tooling projects.
Grid and Flexbox Tooling
Mozilla innovated in the layout-debugging space years ago with the first grid and flexbox inspectors in Firefox. Chromium-based browsers are now catching up, after a collaborative effort across engineering, product and design teams at Google and Microsoft. The set of layout tooling shipped as part of this effort includes:
- Multiple grid and flexbox layouts highlightable on one page, with controls to toggle between showing grid line numbers, names or areas.
- Visual editors for flexible or fixed values on flex and grid properties, letting you tweak layout values without leaving the DevTools.
- Alignment icons within CSS property autocomplete, clarifying the effect of values like
stretch,start, orspace-between.
- An overlay highlight on rule hover, visually demonstrating which regions of a page a property governs.
Localizing DevTools for Everyone
Another Microsoft and Google joint project brought the Chromium DevTools beyond English. Full localization had never been the plan, so this required revisiting the entirety of the code to mark user-facing strings as translatable. DevTools settings (F1) now includes a language drop-down, letting you select a language for the entire UI.
Edge DevTools: Specific and Assistive
The migration of Microsoft Edge to Chromium triggered debate more than two years ago. Since then, the Edge team has shipped distinctive tooling ideas based on user feedback.
Managing the Tool Menagerie
With roughly 30 panels available to open, DevTools can become draining to navigate. Recognizing that users rarely need everything at once — nor do they want to hunt for what they miss — Edge introduced several small improvements to make tab management work in your favor:
- A close button on each tab, letting go of features you no longer use;
- A
+button at the end of the tab bar to open and add any panel; - A right-click menu to relocate tools quickly.
Panels can move anywhere. Right-click on a top tab to access "Move to bottom," sending it to the drawer below. Similarly, a tab in the drawer offers a "Move to top" option.
Integrated Tooltips
The sheer breadth of panels — there are currently close to 30 — means discovering useful ones, or remembering their purpose, requires documentation and trial. Edge builds that gap by offering a toggleable tooltip overlay across the tools.
Once activated, panels that get hovered upon display contextual help and links to the proper documentation pages on Microsoft's website. You can flip this mode on a few ways:
- Press Ctrl + Shift + H on Windows/Linux (or Cmd + Shift + H on Mac).
- Open the main (
...) menu, navigate to Help and choose "Toggle the DevTools Tooltips." - Use the command menu and search for "Tooltips."
Broader Theme Support
Color themes are a personal choice, particularly for code readers. Edge already supported dark and light modes. To match broader editorial and visual tastes, it added nine new themes carried over directly from VS Code. You can cycle through these via the settings panel (F1, or the gear icon), or from the command menu by typing theme.
Firefox’s Scrollbar and Accessibility Additions
Firefox’s DevTools team has been working through a sizable architecture refresh, aiming to modernize the underlying codebase while operating with a reduced headcount. Despite those constraints, the team has shipped some genuinely useful features, particularly around diagnosing layout and accessibility issues.
One of the more practical additions is a tool for tracking down unwanted scrollbars. In the Inspector panel, any element that scrolls is now marked with a scroll badge — a big help when you’re working through deeply nested DOM trees. Clicking that badge will highlight the exact element or elements responsible for causing the overflow, which eliminates a lot of guesswork.
Keyboard navigation is another area that got attention. The order in which focusable elements receive focus when you press tab is a critical accessibility detail, particularly as modern CSS layout techniques make it easy to visually rearrange content in ways that don’t match the source order. Firefox’s Accessibility Inspector already provided information about the accessibility tree, automated checks for common issues, and color vision deficiency simulators. Now, a new “Show Tabbing Order” checkbox in the toolbar overlays the numeric tabbing sequence directly on the page.
Firefox’s Evolving Performance Profiler
Performance work has historically been Chrome’s strong suit, but Firefox engineers have been building out their own profiler. Originally created to optimize the browser’s native engine code, the tool also supported analyzing JavaScript performance from the start. In Nightly and Developer Edition builds, this newer profiler has now replaced the older Performance panel entirely.
A notable capability of the new Firefox profiler is profile sharing. You can record a session, share it with someone else, and collaborate on optimizing the same use case — which is particularly valuable for teams debugging performance issues across environments.
Safari Web Inspector’s Modernized Toolset
Apple’s small team has been steadily improving the Web Inspector, and while some of the changes bring it in line with Chromium-based tools, a few features remain exclusive to Safari. For developers debugging on iOS or tvOS, familiarity with these tools can make a real difference.
CSS Grid Debugging and Layout Panels
Safari was the last major browser to ship a dedicated CSS grid debugging tool. Now that it has landed, the basics work similarly to what you’d find in Firefox, Chrome, or Edge: grid badges appear in the Elements panel so you can spot grids quickly, clicking a badge toggles the overlay visualization, and a new Layout panel in the sidebar lists all grids and lets you control their overlays.
Two things set Safari’s implementation apart. The first is performance — you can enable multiple overlays at once and scroll around without noticeable slowdown. The second is that Safari introduced a 3-pane Elements panel, similar to Firefox, which lets you view the DOM, the selected element’s CSS rules, and the Layout panel simultaneously.
Debugger Improvements and Sources Panel
Previously, Safari split resources and debugging across separate panels. Those have now been merged into a single Sources panel, which brings the layout closer to Chromium’s conventions. This kind of consistency is valuable in a cross-browser workflow — developers shouldn’t have to relearn fundamental navigation patterns when switching tools.
Beyond restructuring, Safari added a few genuinely innovative debugging capabilities. The bootstrap script lets you run JavaScript code before any page script, which is useful for instrumenting built-in functions with debugger statements or logging. Meanwhile, the breakpoint system across all types — conditional, DOM, event, and others — now offers extensive configuration options. You can set breakpoints to trigger only under certain conditions, run code without pausing execution, or even play an audio beep when a line executes.
For managing objects in memory-heavy applications, Safari’s console now supports two useful functions. queryInstances(Animal) returns an array of all instances of a given class, while queryHolders(foo) lists all objects holding a reference to a specific object. These complement the Memory tool’s heap snapshots, particularly when you already know which class or object is at the root of a dependency or leak problem.
Sending Feedback and Reporting Bugs
Across all major browsers, the DevTools engineering teams are relatively small but actively developing. They rely on user feedback to prioritize fixes and features. Reporting an issue goes beyond helping yourself — it can surface problems that many others are encountering but haven’t reported.
- Firefox DevTools: Bugs and feature requests go through the public Bugzilla tracker (you can log in with a GitHub account). The team is also reachable on Twitter at @FirefoxDevTools and via the Mozilla chat.
- Safari Web Inspector: WebKit uses a public bug tracker at bugs.webkit.org, with guidance on searching and filing. The team is on Twitter at @webkit, and you can also use Apple’s feedback assistant.
- Edge DevTools: The feedback button in the top-right corner of DevTools is the quickest route. Twitter users can mention @EdgeDevTools.
- Chrome DevTools: Feedback is welcome on the devtools-dev mailing list and at @ChromeDevTools.
- Chromium: Since Chromium underpins Chrome, Edge, and others, you can also file issues on Chromium’s bug tracker.
It’s worth noting that given the volume of incoming reports, fixes won’t always land quickly. But the teams are listening, and your reports help shape what gets built next.
