What's new in DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova

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 Settings > Experiments > check_box_outline_blank 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 Settings > Experiments > check_box 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 Match case.
  • regular_expression Regular expression.
  • match_word 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 upload load and download 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.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59