What's New in DevTools (Chrome 117)

Sofia Emelianova

Network panel improvements

Override web content locally even faster

The local overrides feature is now streamlined, so you can easily mock response headers and web content of remote resources from the Network panel without access to them.

To override web content, open the Network panel, right-click a request, and select Override content.

The override options in the drop-down menu of a request.

If you have local overrides set up but disabled, DevTools enables them. If you haven't set them up yet, DevTools prompts you in the action bar at the top. Select a folder to store the overrides in and allow DevTools access to it.

Select a folder and allow access to it in the action bar at the top.

Once the overrides are set up, DevTools then takes you to Sources > Overrides > Editor to let you override web content.

Note that the overridden resources are indicated with in the Network panel. Hover over the icon to see what's overridden.

Chromium issues: 1465785, 1470532, 1469359.

Override the content of XHR and fetch requests

You can now override the content of XHR and fetch requests in addition to their response headers. With such overrides, you can mock the API responses to debug your web page even if your backend and API aren't ready yet.

DevTools currently supports content overrides for the following request types: images (for example, avif, png), fonts, fetch and XHR, scripts (css and js), and documents (html). DevTools now grays out the Override content option for unsupported types.

Chromium issues: 792101, 1469776.

Hide Chrome extension requests

To help you focus on the code you author and filter out irrelevant requests sent by extensions you might have installed in Chrome, the Network panel gets a new filter.

To filter out all the requests sent to chrome-extension:// URLs, check Hide extension URLs.

Extension URLs hidden from the requests table.

Chromium issues: 1257885, 1458803.

Human-readable HTTP status codes

The Status Code in the request's header now shows human-readable text next to the HTTP status codes, so you can figure out what happened to the request quicker.

The before and after displaying human-readable HTTP status codes.

You can also hover over the status code in the request table to see the same text.

Chromium issue: 1153956.

Pretty-print responses for JSON subtypes

The Response tab of for a request with a application/[subtype]+json MIME subtype (for example, ld+json, hal+json, and others) now parses the response correctly and lets you prettify it.

The before and after parsing an application/json subtype in a network response preview.

Chromium issue: 406900.

Performance: See the changes in fetch priority for network events

The Performance panel now shows two priority fields in the Summary of an event in the Network track: Initial Priority and (final) Priority, instead of just the singe Priority. With this additional field you can now see if the event's fetch priority changes and tweak the order of downloads. For more information, see Optimizing resource loading with the Fetch Priority API.

Before and after displaying changes in fetch priority.

Additionally, you can find the same information in the Priority column of the Network panel, with the Big request rows setting enabled.

The Priority column in the Network panel.

Chromium issues: 1463901, 1380964.

Sources settings enabled by default: Code folding and automatic file reveal

The Settings > Preferences > Code folding option is now enabled by default. This option lets you fold code blocks.

To fold a code block, hover over the line number next to the start of the block and click the collapse icon. Click {...} to expand the block again.

Moreover, the Settings > Preferences > Automatically reveal files in the sidebar is now also enabled by default.

This setting makes the file tree in the Sources > Page select the current file open in the Editor when you switch tabs.

Chromium issues: 1459193, 1336599.

Improved debugging of third-party cookie issues

In an effort to help build a more private web and in parallel with updates by other browsers, Chrome introduced the Privacy Sandbox initiative. This initiative fundamentally enhances privacy on the web and can sustain a healthy, ad-supported web in a way that will render third-party cookies obsolete. Privacy Sandbox has a gradual phaseout timeline to let you adapt to changes comfortably.

You can already test how Chrome behaves after the third-party cookie phaseout. To do this, run Chrome from the command line with the --test-third-party-cookies-phaseout flag. To learn what this flag does, see Debugging cookies.

Regardless of the way you run Chrome (with or without the flag), the Issues tab now has the Include third-party cookie issues checkbox enabled by default for all new Chrome users and, as a result, reports:

A breaking change warning about the upcoming phaseout.
Issues related to third-party cookies.

If want to see cookie warnings about the upcoming phaseout as an existing Chrome user, make sure to check this checkbox.

To test this, inspect cookies at this demo page.

Third-party cookie issues reported in the Issues tab.

Additionally, the Blocked response cookies filter in the Network panel has been rephrased to make it clear that it shows only the blocked response cookies.

The checkbox is enabled and shows only the requests with blocked response cookies.

Chromium issues: 1458839, 1462693, 1466310.

Debug preloading in the Application panel

The Chrome team is bringing back full prerendering of future pages that a user is likely to navigate to. To let you debug this, DevTools adds the Preloading section to the Application panel. The new prefetching and prerendering (collectively known as "navigational preloading") uses the Speculation Rules API rather than to the link-based resource hints.

On this demo page, in the Application > Preloading section, you can inspect:

Speculation Rules that lists all the rule sets found on the current page.
Preloads that lists all the prefetched and prerendered URLs from the rule sets.
This Page that lists the prerendered status of the current page.

For more information, refer to the dedicated post on debugging speculation rules.

Chromium issue: 1410709.

New colors

You might have already noticed that DevTools now has a refreshed look that better aligns with Chrome. One contributing factor is the new color scheme.

The before and after applying new colors.

This version (117) brings more UX improvements to DevTools, both already mentioned and listed further, including a number of improved UI texts.

Chromium issue: 1456677.

Lighthouse 10.4.0

The Lighthouse panel now runs Lighthouse 10.4.0. Most notably, this version adds new accessibility audits for the following:

For example:

Failed check on the color of links that makes them indistinguishable.

See also the full list of changes. To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Chromium issue: 772558.

The C/C++ WebAssembly debugging extension for DevTools is now open source

The C/C++ WebAssembly debugging extension for DevTools is now open source and resides in the DevTools frontend repository. This extension enables debugging capabilities in DevTools for C++ programs compiled to WebAssembly. For more information, see Debug C/C++ WebAssembly.

Learn how to build, run, and test the extension and feel free to contribute.

Chromium issue: 1410709.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

CSS Nesting: The Elements panel now shows the entire selector chain for nested children (1172985).
Application > Manifest now has a Window Controls Overlay section that checks if a display_override value is present in the Manifest and provides links to relevant documentation.
The Sources > Page tree now does the following, including but not limited to (1442863):
- Greys out folders if all their content is ignore-listed.
- Colors folders in orange if all their content is from a source map.
Performance: Capture Settings now automatically hide when you start the recording (1455498).
Sources > Editor restored the Ctrl + Arrow behavior (Win) and Opt + Arrow (MacOs) (1468208).
Animations > Pause all toggle now keeps its state across page loads (1446046).
Application > Storage > Cache storage moved to the Application > Storage > Cache section (1462622).
Some UI texts and tooltips are improved: Hardware concurrency tooltip, Network filter texts and a main menu option, capitalization in the Application tree view, Network > Headers texts, Sources > Overrides and Filesystem texts.

New experimental features

New rendering emulation: `prefers-reduced-transparency`

Your website users may start enabling the new experimental prefers-reduced-transparency CSS media feature on their devices to indicate their preference to reduce transparent effects. You might consider taking this preference into account to increase your website's accessibility. To help you, the Rendering drawer tab can now emulate the prefers-reduced-transparency: reduce setting, so you can prototype a solution and test how your website behaves in this case.

To test this feature in Chrome, enable Experimental Web Platform features in chrome://flags.

Chromium issue: 1424879.

Enhanced Protocol monitor

Chrome DevTools uses the Chrome DevTools Protocol (CDP) to instrument, inspect, debug, and profile Chrome browsers. If you are a Chromium or DevTools developer, the Protocol monitor provides you with a way to view all the CDP requests and responses made by DevTools and send CDP commands.

The Protocol monitor gets a new interface to let you construct and send CDP commands easier. Now you don't have to look up commands and their parameters in documentation, DevTools will suggest them to you.

In the bottom right corner of the Protocol monitor drawer tab, click Show CDP command editor, select a target, start typing a command, select one of the suggested, if required, specify parameter values, and click Send command (Ctrl/Cmd + Enter).

Specifying and sending a CDP command.

Chromium issue: 1469345.

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 > 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.