New features for cookies
Debug why a cookie was blocked
After recording network activity, select a network resource and then navigate to the updated
Cookies
tab to understand why that resource's request or response cookies were blocked. See
Changes to the default behavior without SameSite
to understand why you might be seeing more
blocked cookies in Chrome 76 and later.
The
Cookies
tab.
- Yellow
Request Cookies
were not sent over the wire. These are hidden by default. Click
show
filtered out request cookies
to show them.
- Yellow
Response Cookies
were sent over the wire but not stored.
- Hover over
More Information
to learn why a cookie
was blocked.
- Most of the data in the
Request Cookies
and
Response Cookies
tables comes from the
resource's HTTP headers. The
Domain
,
Path
, and
Expires/Max-Age
data comes from the
Chrome DevTools Protocol
.
Chromium issues
#856777
,
#993843
View cookie values
Click a row in the
Cookies pane
to view the value of that cookie.
Viewing the value of a cookie.
Chromium issue
#462370
Simulate different prefers-color-scheme and prefers-reduced-motion preferences
The
prefers-color-scheme
media query lets you match your site's style to your user's
preferences. For example, if the
prefers-color-scheme: dark
media query is true, it means that
your user has set their operating system to dark mode and prefers dark mode UIs.
Open the
Command Menu
, run the
Show Rendering
command, and then set the
Emulate CSS media
feature prefers-color-scheme
dropdown to debug your
prefers-color-scheme: dark
and
prefers-color-scheme: light
styles.
When
prefers-color-scheme: dark
is set (middle box) the Styles pane (right box) shows the CSS that
gets applied when that media query is true and the viewport shows the dark mode styles (left box).
You can also simulate
prefers-reduced-motion: reduce
using the
Emulate CSS media feature
prefers-reduced-motion
dropdown next to the
Emulate CSS media feature prefers-color-scheme
dropdown.
Chromium issue
#1004246
Timezone emulation
The Sensors tab now lets you not only
override geolocation
, but also emulate arbitrary
timezones and test the impact on your web apps. Perhaps surprisingly, this new feature improves the
reliability of geolocation emulation as well: previously, web apps could detect location spoofing by
matching the location against the user's local timezone. Now that geolocation and timezone emulation
are coupled, this category of mismatches is eliminated.
Code coverage updates
The
Coverage tab
can help you
find unused JavaScript and CSS
.
The Coverage tab now uses new colors to represent used and unused code. This color combination is
proven to be more accessible for people with color vision deficiencies. The red bar on the left
represents unused code, and the bluish bar on the right represents used code.
The new coverage
type filter
text box lets you filter for coverage information by its type:
display only JavaScript coverage, only CSS, or display all types of coverage.
The Coverage tab.
The Sources panel displays code coverage data when it is available. Clicking the red or bluish marks
next to the line number opens the Coverage tab and highlights the file.
Coverage data in the Sources panel. Line 8 is an example of unused code. Line 11 is an example of
used code.
Chromium issues
#1003671
,
#1004185
Debug why a network resource was requested
After recording network activity, select a network resource and then navigate to the
Initiator
tab to understand why the resource was requested. The
Request call stack
section describes the
JavaScript call stack leading up to the network request.
The
Initiator
tab.
Chromium issues
963183
,
842488
Console and Sources panels respect indentation preferences again
For a long time DevTools has had a setting to customize your indentation preference to 2 spaces, 4
spaces, 8 spaces, or tabs. Recently the setting was essentially useless because the Console and
Sources panels were ignoring the setting. This bug is now fixed.
Go to
Settings
>
Preferences
>
Sources
>
Default Indentation
to set your
preference.
Chromium issue
#977394
New shortcuts for cursor navigation
Press Control+P in the Console or Sources panels to move your cursor to the line above. Press
Control+N to move your cursor to the line below.
Chromium issue
#983874
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