What's New In DevTools (Chrome 95)

Jecelyn Yeen

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!

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.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.