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.
All hidden issues will be added under the Hidden issues pane. Expand the pane. You can unhide all hidden issues or a selected one.
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}`;
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.
Apart from these changes, the properties in the Properties pane are also flattened now for better DOM properties debugging experience, especially for Web components.
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.
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.
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.
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!
Thanks for reading this!
Follow Me:
- Hire me:Fiverr (WordPress Website Developer & Designer | SEO)
- 20 Google Chrome Extension Which helpful for freelancer work
- 3 Ways To Get Your First Order on Fiverr in 2022
- 5 Free Books Reading Online
- What is Freelancing and How does Freelancing work?
- 5 High Demand Internet Marketing Services in 2022
- 6 Best Weight loss Apps Help You Hit Your Goals
Oldest comments (0)