What's New In DevTools (Chrome 95)

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   More   > Hide issues like this.

Hide issues menu

All hidden issues will be added under the Hidden issues pane. Expand the pane. You can unhide all hidden issues or a selected one.

Hidden issues pane

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.

Own properties are bold and sorted first

Apart from these changes, the properties in the Properties pane are also flattened now for better DOM properties debugging experience, especially for Web components.

Flatten properties

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.

The lazy-loaded LCP audit in a Lighthouse report

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!

Sort snippets in the Sources panel

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.

New links to translated release notes and 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!

Command Menu

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   More   > 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 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