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
.
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.
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
.
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.
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.
Chromium issue:
406900
.
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
.
Additionally, you can find the same information in the
Priority
column of the
Network
panel, with the
Big request rows
setting enabled.
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
.
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.
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.
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:
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:
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
).
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!
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
.
What's new in DevTools
A list of everything that has been covered in the
What's new in DevTools
series.
Chrome 125
Chrome 124
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