What's new in DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Streamlined filter bar in the Network panel

The filter bar is redesigned to let you filter requests easier and declutter the Network panel.

The corresponding experiment was turned on by default in this version but will be reverted. You can track the progress in crbug.com/1523150.

The new filter bar has two drop-down menus: one for choosing request types and another for hiding data and extension URLs or only showing blocked cookies and requests, and third-party requests. Both menus support multi-select.

To bring back the old filter bar immediately, turn off Settings > Experiments > Redesign of the filter bar in the Network panel.

The before and after streamlining the filter bar in the Network panel.

Feel free to leave your feedback about the feature in crbug.com/1500573.

Chromium issue: 1486431.

Elements improvements

@font-palette-values support

The Elements panel now supports the @font-palette-values CSS at-rule. It lets you customize the default values of the font-palette property.

In Styles, click the value of the font-palette property and DevTools takes you to the @font-palette-values dedicated section where you can edit your custom values.

The @font-palette-values section in Styles.

Chromium issue: 1501781.

Supported case: Custom property as a fallback of another custom property

Elements > Styles now resolves a custom property that is a fallback of another custom property.

The before and after resolving a custom property as a fallback of another custom one.

Chromium issue: 1499265.

Improved source map support

The Settings > Experiments > Resolve variable names in expressions using source maps has been turned on by default.

DevTools uses source maps to let you debug your original code in Sources and Scope even after you've combined, minified, or compiled it. This experiment lets you evaluate your original variable names consistently across DevTools, including but not limited to:

For more details, see the corresponding RFC.

Chromium issue: 1444349.

Performance panel improvements

Enhanced Interactions track

The Performance > Interactions track gets whiskers that indicate input and presentation delays at processing time boundaries.

The before and after adding whiskers to the Interactions track.

Additionally, when you hover over an interaction, you can see a helpful tooltip detailing timings.

Chromium issue: 1495751.

Advanced filtering in Bottom-Up, Call Tree, and Event Log tabs

The Bottom-Up, Call Tree, and Event Log tabs in the Performance panel got three new buttons for advanced filtering:

  • Match case.
  • Regular expression.
  • Match whole word.

The three new buttons for advanced filtering.

Additionally, to help you retain context, now only top level items match the filter in the Bottom-Up tab. Previously, the filter matched every node.

Chromium issue: 1496355.

Indentation markers in the Sources panel

The Editor in the Sources panel now marks indented code blocks with vertical lines for your convenience.

The before and after marking indented code blocks with vertical lines.

Chromium issue: 1479986.

Helpful tooltips for overridden headers and content in the Network panel

The Network panel now shows tooltips when you hover over the purple dot icon next to Headers and Response tabs of a request. The tooltips tell you what was overridden by DevTools.

The new tooltips next to the purple dot icon in Headers and Response tabs.

Chromium issue: 1469776.

New Command Menu options for adding and removing request blocking patterns

You can now type commands to add or remove network request blocking patterns into the Command Menu.

The before and after adding new commands to add or remove network blocking patterns.

The Add command takes you to the dialog to specify the pattern and the Remove command removes all patterns without opening the Network request blocking panel.

The CSP violations experiment is removed

The experimental CSP violations tab introduced in version 89 has been removed as redundant.

To see CSP details at a glance, navigate to Application > Frames > Content Security Policy (CSP).

The Content Security Policy in the Application panel.

Additionally, the Issues panel reports CSP violations.

The Content Security Policy in the Application panel.

Lighthouse 11.3.0

The Lighthouse panel now runs Lighthouse 11.3.0. See the full list of changes. Among notable changes is the ability to run reports on 404 pages.

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Chromium issue: 772558.

Accessibility

This version has the following accessibility improvements:

  • In Network > Payload, you can now tab-focus the view source and view URL-encoded buttons and press Enter or Space to trigger the corresponding action.
  • In Console, to reduce confusion, the links that lead to scripts that are no longer available to the Debugger are now grayed out and can't be clicked.
  • In navigation trees, such as the tree in Sources > Page, the Enter key now expands and collapses nodes with children.

Chromium issues: 1338391, 1500662, 1420362.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Performance. If a recording fails, you now have the option to Download raw trace events and try to figure out what went wrong (commit).
  • The Show Console shortcut (Ctrl+` for Mac, Ctrl++ for Windows and Linux) now not only opens the Console but also closes when pressed a second time.
  • Developer Resources. Fixed a bug that prevented reporting CSS resources and their issues (1420362).
  • Elements:
    • Fixed a bug with inspecting elements in iframes (1453375).
    • Computed. Fixed a bug that prevented default values from rendering (1499882).
    • Search. Fixed a bug that prevented calculating the number of matches for short queries of one or two characters (1416457).
  • Console. Now correctly parses regular expressions that end with an escaped character in the Filter box (1346936).
  • Settings > Workspace. Fixed a bug that prevented adding an excluded folder (1503580).
  • Network > Preview. Now renders images with data: URIs (1381791).
  • Memory. Added proper load and save buttons to the action bar (1275407).

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com.
  • Report a DevTools issue using the More options   More   > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.