New CSS length authoring tools
DevTools added an easier yet flexible way to update lengths in CSS!
In the
Styles
pane, look for any CSS property with length (e.g.
height
,
padding
).
Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown.
Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally to increase or decrease the value. To adjust the value by 10, hold the
Shift
key when dragging.
You can still edit the unit value as text ? just click on the value and start editing.
Chromium issues:
1126178
,
1172993
Hide issues in the Issues tab
You can now hide specific issues in the Issues tab to focus only on those issues that matter to you.
In the
Issues tab
, hover over on an issue you would like to hide. Click on
More options
>
Hide issues like this
.
All hidden issues will be added under the
Hidden issues
pane. Expand the pane. You can unhide all hidden issues or a selected one.
Chromium issue:
1175722
Improved the display of properties
DevTools improve the display of properties by:
- Always bold and sort own properties first in the
Console
,
Sources
panel and
Properties
pane.
- Flatten the properties display in the
Properties
pane.
For example, the snippet below creates an
URL
object
link
with 2 own properties:
user
and
access
, and updates the value of an inherited property
search
.
/* example.js */
const link = new URL('https://goo.gle/devtools-blog');
link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;
Try logging
link
in the
Console
. Own properties are now bold and sorted first. These changes make it easier to spot custom properties, especially for
Web APIs
(e.g.
URL
) with many inherited properties.
Apart from these changes, the properties in the
Properties
pane are also flattened now for better DOM properties debugging experience, especially for
Web components
.
Chromium issues:
1076820
,
1119900
Lighthouse 8.4 in the Lighthouse panel
The
Lighthouse
panel is now running Lighthouse 8.4. Lighthouse will now detect if the
Largest Containful Paint (LCP)
element was a lazy-loaded image and recommend removing the
loading
attribute from it.
Check out the
What’s new in Lighthouse 8.4
for more details on the updates.
Chromium issue:
772558
Sort snippets in the Sources panel
The
snippets
in the
Snippets
pane under the
Sources
panel are now sorted alphabetically. Previously, it’s not sorted.
Utilize the snippets feature to run commands quicker. Watch this video for a
tip
!
Chromium issue:
1243976
New links to translated release notes and report a translation bug
You can now click to read the DevTools release notes in 6 other languages -
Russian
,
Chinese
,
Spanish
,
Japanese
,
Portuguese
and
Korean
via the What’s new tab.
Since Chrome 94, you can
set your preferred language
in DevTools. If you found any issues with the translations, help us improve it by
reporting a translation issue
via
More options
>
Help
>
Report a translation bug
.
Chromium issues:
1246245
,
1245481
Improved UI for DevTools command menu
Did you find it hard to search for a file in the
Command Menu
? Good news for you, the
Command Menu
user interface is now enhanced!
Open the
Command Menu
to search for a file with keyboard shortcut
Control
+
P
in Windows and Linux, or
Command
+
P
in MacOS.
The UI improvements of the
Command Menu
is still ongoing, stay tuned for more updates!
Chromium issue:
1201997
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