What's New in DevTools (Chrome 113)

Sofia Emelianova

Jecelyn Yeen

Override network response headers

You can now override response headers in the Network panel. Previously, you needed access to the web server to experiment with HTTP response headers.

With response header overrides, you can locally prototype fixes for various headers, including but not limited to:

• Cross-Origin Resource Sharing (CORS) Headers
• Permissions-Policy Headers
• Cross-Origin Isolation Headers

To override a header, navigate to Network > Headers > Response Headers, hover over a header's value, click and edit it.

You can also add custom headers.

To edit all overrides in a single place, edit the .headers file in Sources > Overrides. There, you can also click Add override rule to override multiple requests using wildcards (*).

Chromium issue: 1288023.

Nuxt, Vite, and Rollup debugging improvements

To help you pinpoint issues quicker during debugging, the enhanced stack trace now hides frames that come from sources generated by Nuxt 3.3 or later. DevTools skips such frames:

• In Console traces, under the Show N more frames link.
• In Sources > Call Stack, under Show ignore-listed frames.

To bring you these improvements, the DevTools, Nuxt, Vite, and Rollup teams collaborated to adopt the x_google_ignoreList source map extension:

• Nuxt 3.3 Release
• Vite Server Options
• Rollup Configuration Options

The DevTools team would like to express gratitude to the Nuxt, Vite, and Rollup teams for making this possible. We appreciate your efforts and collaboration, which were essential to the success of this implementation. Thank you again for your contributions!

CSS improvements in Elements > Styles

Invalid CSS properties and values

To help you diagnose CSS issues faster, the Styles pane now crosses out:

• An entire CSS declaration (property and value) when the CSS property is invalid.
• Just the value when the CSS property is valid but the value is invalid.

The DevTools team would like to express gratitude to Yisi(一丝) for landing this improvement.

Links to key frames in the animation shorthand property

The animation shorthand CSS property now contains links to the corresponding @keyframes at-rules, so you can navigate the Styles pane faster.

Chromium issue: 1420656.

New Console setting: Autocomplete on Enter

Starting with the previous version (112), you can configure the DevTools Console to apply an autocomplete suggestion when you press Enter.

By default, to accept an autocomplete suggestion, you can press Tab or Arrow right. To also autocomplete with Enter, enable Settings > Console > Accept autocomplete suggestion on Enter.

Additionally, the text of another setting is now more user-friendly: Treat code evaluation as user action.

Chromium issue: 1276960.

Command Menu emphasizes authored files

The quick open dialog in the Command Menu now grays out the ignore-listed third-party files to put more emphasis on the files you authored.

Chromium issue: 1424345.

JavaScript Profiler deprecation: Stage two

As early as Chrome 58, the DevTools team planned to eventually deprecate the JavaScript Profiler and have Node.js and Deno developers use the Performance panel for profiling JavaScript CPU performance.

DevTools version 113 starts phase two of the four-phase JavaScript Profiler deprecation. During this phase, you can still open the panel but its UI is no longer available.

To profile CPU performance, click Go to Performance panel.

Chromium issue: 1354548.

Miscellaneous highlights

These are some noteworthy fixes in this release:

• Fixed a bug that caused pretty-printing in the Sources panel to handle variable names with Unicode characters incorrectly (1425055).
• The Issues tab added a new message for Autofill issues regarding non-standard HTML values (1399414).

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

• Submit feedback and feature requests to us at crbug.com.
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on 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.