DEV Community

Cover image for What's New In DevTools (Chrome 95)
Binate Noor
Binate Noor

Posted on

What's New In DevTools (Chrome 95)

1. New CSS length authoring tools

DevTools added a simpler yet flexible way of refreshing lengths in CSS!

In the Styles pane, look for any CSS property with length (e.g. height, padding).

2. Hide issues in the Issues tab

You would now be able to conceal explicit issues in the Issues tab to zero in just on those issues that make a difference 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.

Issue tab.png

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

dnPfPGkxpkcSZRIHqGDA.png

3. Improved the display of properties

DevTools improve the display of properties by:

  • Always bold and sort owns 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}`;
Enter fullscreen mode Exit fullscreen mode

Try logging the link into 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.

Ngjx6YRQsH3Fhl6DUZYl.png

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

hIQGKlYkWKJzljHZaaM9.png

4. 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.

u9nepJj3wgpMgoNxSaDZ.png

5. 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.

knb78RG6NCETitMbNoyV.png

6. Report a translation bug and New links to translated release notes

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.

Qrg4Ahf4sYseL2NQZwIl.png

7. 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 are still ongoing, stay tuned for more updates!

TJT2ry3vmUW1KoFgSKQP.png

Thanks for reading this!

Discussion (0)