Emulate vision deficiencies
Open the
Rendering tab
and use the new
Emulate vision deficiencies
feature to get a better
idea of how people with different types of vision deficiencies experience your site.
Emulating blurred vision.
DevTools can emulate blurred vision and the following
types of color vision deficiencies
:
- Protanopia: the inability to perceive any red light.
- Deuteranopia: the inability to perceive any green light.
- Tritanopia: the inability to perceive any blue light.
- Achromatopsia: the inability to perceive any color except for shades of grey (extremely rare).
Less extreme versions of these color vision deficiencies exist, and in fact they are more common.
For example,
protanomaly
is a reduced sensitivity to red light (as opposed to
protanopia
, which
is the complete inability to perceive red light). However, these "-omaly" vision deficiencies are
not as clearly defined: every person with such a vision deficiency is different and might see things
differently (being able to perceive more/less of the relevant colors).
By designing for the more extreme simulations in DevTools, your web apps are guaranteed to be
accessible to people with protanomaly, deuteranomaly, tritanomaly, and achromatomaly as well.
Send feedback to
Chromium issue #1003700
, or
read more about the implementation
.
Emulate locales
You can now emulate locales by setting a location in
Sensors
>
Location
.
Open the
Command
Menu
and type
Sensors
to access the
Sensors
tab. After performing these actions DevTools
modifies the current default locale, affecting the following:
Intl.*
APIs, e.g.
new Intl.NumberFormat().resolvedOptions().locale
- other locale-aware JavaScript APIs such as
String.prototype.localeCompare
and
*.prototype.toLocaleString
, e.g.
123_456..toLocaleString()
- DOM APIs such as
navigator.language
and
navigator.languages
- the
Accept-Language
HTTP request header
Check out
Locale-dependent code example
to try it yourself.
Send feedback to
Chromium issue #1051822
.
Cross-Origin Embedder Policy (COEP) debugging
The Network panel now provides
Cross-Origin Embedder Policy
debugging information.
The
Status
column now provides a quick explanation of why a request was blocked as well as a
link to view that request's headers for further debugging:
The
Response Headers
section of the
Headers
tab provides more guidance on how to resolve the
issues:
Send feedback to
Chromium issue #1051466
.
New icons for breakpoints, conditional breakpoints, and logpoints
The
Sources
panel has new icons for breakpoints, conditional breakpoints, and logpoints:
The motivation for the new icons was to make the UI more consistent with other GUI debugging tools
(which usually color breakpoints red) and to make it easier to distinguish between the 3 features at
a glance.
Send feedback to
Chromium issue #1041830
.
View network requests that set a specific cookie path
Use the new
cookie-path
filter keyword in the
Network
panel to focus on the network requests
that set a specific
cookie path
.
Check out
Filter requests by properties
to discover more special keywords like
cookie-path
.
Dock to left
from the Command Menu
Open the
Command Menu
and run the
Dock to left
command to move DevTools to the left of your
viewport.
Send feedback to
Chromium issue #1011679
.
The
Settings
option in the
Main Menu
has moved
The option for opening
Settings
from the
Main Menu
can now be found under
More Tools
.
Send feedback to
Chromium issue #1050855
.
The
Audits
panel is now the
Lighthouse
panel
The DevTools and Lighthouse teams frequently got feedback from web developers that they would hear
that it's possible to run
Lighthouse
from DevTools, but when they went to try it out they
couldn't find the "Lighthouse" panel, so the
Audits
panel is now the
Lighthouse
panel.
Delete all Local Overrides in a folder
After setting up
Local Overrides
you can now right-click a folder and select the new
Delete
all overrides
option to delete all Local Overrides in that folder.
Send feedback to
Chromium issue #1016501
.
Updated Long tasks UI
A
Long Task
is JavaScript code that monopolizes the main thread for a long time, causing a web
page to freeze.
You've been able to
visualize Long Tasks in the Performance panel
for a while now, but in
Chrome 83 the Long Task visualization UI in the Performance panel has been updated. The Long Task
portion of a task is now colored with a striped red background.
Send feedback to
Chromium issue #1054447
.
Maskable icon support in the Manifest pane
Android Oreo introduced adaptive icons, which display app icons in a variety of shapes across
different device models.
Maskable icons
are a new icon format that support adaptive icons,
which enable you to ensure that your
PWA
icon looks good on devices that support the maskable
icons standard.
Enable the new
Show only the minimum safe area for maskable icons
checkbox in the
Manifest
pane to check that your maskable icon will look good on Android Oreo devices. Check out
Are my
current icons ready?
to learn more.
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