What’s New In DevTools (Chrome 90)

What’s New In DevTools (Chrome 90)

New CSS flexbox debugging tools

DevTools now has dedicated CSS flexbox debugging tools!

CSS flexbox debugging tools

When an HTML element on your page has display: flex or display: inline-flex applied to it, you can see a flex badge next to it in the Elements panel. Click the badge to toggle the display of a flex overlay on the page.

In the Styles pane, you can click on the new icon next to the display: flex or display: inline-flex to open the Flexbox editor. Flexbox editor provides a quick way to edit the flexbox properties. Try it yourself!

In addition, the Layout pane has a Flexbox section, display all the flexbox elements on the page. You can toggle the overlay of each element.

Flexbox section in the Layout pane

Chromium issues: 1166710, 1175699

New Core Web Vitals overlay

Better visualize and measure your page performance with the new Core Web Vitals overlay.

Core Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Open the Command Menu, run the Show Rendering command, and then enable the Core Web Vitals checkbox.

The overlay currently displays:

  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

Core Web Vitals overlay

Chromium issue: 1152089

Issues tab updates

Moved issue count to the Console status bar

A new issue count button is now added in the Console status bar to improve the visibility of issues warnings. This will replace the issue message in the Console.

Issue count in the Console status bar

Chromium issue: 1140516

Report Trusted Web Activity issues

The Issues tab now reports Trusted Web Activity issues. This aims to help developers understand and fix the Trusted Web Activity issues of their sites, improving the quality of their applications.

Open a Trusted Web Activity. Then, open the Issues tabs by clicking on the Issues count button in the Console status bar to view the issues. Watch this talk by Andre to learn more about how to create and deploy Trusted Web Activity.

Trusted Web Activity issues in the Issues tab

Chromium issue: 1147479

Format strings as (valid) JavaScript string literals in the Console

Now, the Console formats strings as valid JavaScript string literals in the Console. Previously, the Console would not escape double quotes when printing strings.

Format strings as (valid) JavaScript string literals

Chromium issue: 1178530

New Trust Tokens pane in the Application panel

DevTools now displays all available Trust Tokens in the current browsing context in the new Trust Tokens pane, under the Application panel.

Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive tracking. Learn how to get started with Trust Tokens.

New Trust Tokens pane

Chromium issue: 1126824

Emulate the CSS color-gamut media feature

Emulate the CSS color-gamut media feature

The color-gamut media query lets you test the approximate range of colors that are supported by the browser and the output device. For example, if the color-gamut: p3 media query matches, it means that the user’s device supports the Display-P3 colorspace.

Open the Command Menu, run the Show Rendering command, and then set the Emulate CSS media feature color-gamut dropdown.

Chromium issue: 1073887

Improved Progressive Web Apps tooling

DevTools now display a more detailed Progressive Web Apps (PWA) installability warning message in the Console, with a link to documentation.

PWA installability warning

The Manifest pane now shows a warning message if the manifest description exceeds 324 characters.

PWA description truncate warning

In addition, the Manifest pane now shows a warning message if the screenshot of the PWA doesn’t match the requirements. Learn more about the the PWA screenshots property and its requirements here.

PWA screenshot warning

Chromium issue: 1146450, 1169689, 965802

New Remote Address Space column in the Network panel

Use the new Remote Address Space column in the Network panel to see the network IP address space of each network resource.

New “Remote Address Space” column

Chromium issue: 1128885

Performance improvements

Page loads performance with DevTools opened are now improved. In some extreme cases we saw 10x performance improvements.

DevTools collects stack traces and attaches them to console messages or asynchronous tasks for later consumption by the developer in case of an issue. Since this collection has to happen synchronously in the browser engine, slow stack trace collection can significantly slow down the page with DevTools open. We’ve managed to reduce the overhead of stack trace collection significantly.

Stay tuned for a more detailed engineering blog post explained on the implementation.

Chromium issues: 1069425, 1077657

Display allowed/disallowed features in the Frame details view

Frame details view now shows a list of allowed and disallowed browser features controlled by the Permissions policy.

Permissions policy is a web platform API which gives a website the ability to allow or block the use of browser features in its own frame or in iframes that it embeds.

Allowed/disallowed features based on Permission policy

Chromium issue: 1158827

New SameParty column in the Cookies pane

The Cookies pane in the Application panel now displays the SameParty attribute of the cookies. The SameParty attribute is a new boolean attribute to indicate whether a cookie should be included in requests to origins of the same First-Party Sets.

SameParty column

Chromium issue: 1161427

Deprecated non-standard fn.displayName support

Support for the non-standard fn.displayName has been deprecated. Use fn.name instead.

Deprecation of non-standard `fn.displayName` support

Chrome has traditionally supported the non-standard fn.displayName property as a way for developers to control debug names for functions that show up in error.stack and in DevTools stack traces. In the example above, the Call Stack would previously show noLongerSupport.

Replace fn.displayName with the standard fn.name, which was made configurable (via Object.defineProperty) in ECMAScript 2015 to replace the non-standardfn.displayName property.

Support for fn.displayName has been unreliable and not consistent across browser engines. It slows down stack trace collection, a cost that developers always pay no matter whether they actually use fn.displayName or not.

Use `fn.name` to control debug names for functions

Chromium issue: 1177685

Deprecation of Don't show Chrome Data Saver warning in the Settings menu

The Don't show Chrome Data Saver warning setting is removed because Chrome Data Saver has been deprecated.

Deprecated “Don't show Chrome Data Saver warning” settings

Chromium issue: 1056922

##Experimental features

Automatic low-contrast issue reporting in the Issues tab

DevTools added experimental support for reporting contrast issues in the Issues tab automatically.

Low-contrast text is the most common automatically-detectable accessibility issue on the web. Displaying these issues in the Issues tab helps developers discover these issues easier.

Open a page with low-contrast issues (e.g. this demo). Then, open the Issues tabs by clicking on the Issues count button in the Console status bar to view the issues.

Automatic low-contrast issue reporting

Chromium issue: 1155460

Full accessibility tree view in the Elements panel

You can now toggle to view the new and improved full accessibility tree view of a page.

The current accessibility pane provides a limited display of its nodes, only showing the direct ancestor chain from the root node to the inspected node. The new accessibility tree view aims to improve that and makes the accessibility tree more explorable, useful, and easier for developers to use.

After enabling the experiment, a new button will show in the Elements panel, click to switch between the existing DOM tree and the full accessibility tree.

Please note that this is an early-stage experiment. We plan to improve and expand the functionality over time.

Full accessibility tree view

Chromium issue: 887173

<<../../_shared/devtools-feedback.md>>

<<../../_shared/canary.md>>

<<../../_shared/discover.md>>


This content originally appeared on Updates and was authored by

What's New In DevTools (Chrome 90)

New CSS flexbox debugging tools

DevTools now has dedicated CSS flexbox debugging tools!

CSS flexbox debugging tools

When an HTML element on your page has display: flex or display: inline-flex applied to it, you can see a flex badge next to it in the Elements panel. Click the badge to toggle the display of a flex overlay on the page.

In the Styles pane, you can click on the new icon next to the display: flex or display: inline-flex to open the Flexbox editor. Flexbox editor provides a quick way to edit the flexbox properties. Try it yourself!

In addition, the Layout pane has a Flexbox section, display all the flexbox elements on the page. You can toggle the overlay of each element.

Flexbox section in the Layout pane

Chromium issues: 1166710, 1175699

New Core Web Vitals overlay

Better visualize and measure your page performance with the new Core Web Vitals overlay.

Core Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

Open the Command Menu, run the Show Rendering command, and then enable the Core Web Vitals checkbox.

The overlay currently displays:

  • Largest Contentful Paint (LCP): measures loading performance. To provide a good user experience, LCP should occur within 2.5 seconds of when the page first starts loading.
  • First Input Delay (FID): measures interactivity. To provide a good user experience, pages should have a FID of less than 100 milliseconds.
  • Cumulative Layout Shift (CLS): measures visual stability. To provide a good user experience, pages should maintain a CLS of less than 0.1.

Core Web Vitals overlay

Chromium issue: 1152089

Issues tab updates

Moved issue count to the Console status bar

A new issue count button is now added in the Console status bar to improve the visibility of issues warnings. This will replace the issue message in the Console.

Issue count in the Console status bar

Chromium issue: 1140516

Report Trusted Web Activity issues

The Issues tab now reports Trusted Web Activity issues. This aims to help developers understand and fix the Trusted Web Activity issues of their sites, improving the quality of their applications.

Open a Trusted Web Activity. Then, open the Issues tabs by clicking on the Issues count button in the Console status bar to view the issues. Watch this talk by Andre to learn more about how to create and deploy Trusted Web Activity.

Trusted Web Activity issues in the Issues tab

Chromium issue: 1147479

Format strings as (valid) JavaScript string literals in the Console

Now, the Console formats strings as valid JavaScript string literals in the Console. Previously, the Console would not escape double quotes when printing strings.

Format strings as (valid) JavaScript string literals

Chromium issue: 1178530

New Trust Tokens pane in the Application panel

DevTools now displays all available Trust Tokens in the current browsing context in the new Trust Tokens pane, under the Application panel.

Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive tracking. Learn how to get started with Trust Tokens.

New Trust Tokens pane

Chromium issue: 1126824

Emulate the CSS color-gamut media feature

Emulate the CSS color-gamut media feature

The color-gamut media query lets you test the approximate range of colors that are supported by the browser and the output device. For example, if the color-gamut: p3 media query matches, it means that the user’s device supports the Display-P3 colorspace.

Open the Command Menu, run the Show Rendering command, and then set the Emulate CSS media feature color-gamut dropdown.

Chromium issue: 1073887

Improved Progressive Web Apps tooling

DevTools now display a more detailed Progressive Web Apps (PWA) installability warning message in the Console, with a link to documentation.

PWA installability warning

The Manifest pane now shows a warning message if the manifest description exceeds 324 characters.

PWA description truncate warning

In addition, the Manifest pane now shows a warning message if the screenshot of the PWA doesn’t match the requirements. Learn more about the the PWA screenshots property and its requirements here.

PWA screenshot warning

Chromium issue: 1146450, 1169689, 965802

New Remote Address Space column in the Network panel

Use the new Remote Address Space column in the Network panel to see the network IP address space of each network resource.

New “Remote Address Space” column

Chromium issue: 1128885

Performance improvements

Page loads performance with DevTools opened are now improved. In some extreme cases we saw 10x performance improvements.

DevTools collects stack traces and attaches them to console messages or asynchronous tasks for later consumption by the developer in case of an issue. Since this collection has to happen synchronously in the browser engine, slow stack trace collection can significantly slow down the page with DevTools open. We've managed to reduce the overhead of stack trace collection significantly.

Stay tuned for a more detailed engineering blog post explained on the implementation.

Chromium issues: 1069425, 1077657

Display allowed/disallowed features in the Frame details view

Frame details view now shows a list of allowed and disallowed browser features controlled by the Permissions policy.

Permissions policy is a web platform API which gives a website the ability to allow or block the use of browser features in its own frame or in iframes that it embeds.

Allowed/disallowed features based on Permission policy

Chromium issue: 1158827

New SameParty column in the Cookies pane

The Cookies pane in the Application panel now displays the SameParty attribute of the cookies. The SameParty attribute is a new boolean attribute to indicate whether a cookie should be included in requests to origins of the same First-Party Sets.

SameParty column

Chromium issue: 1161427

Deprecated non-standard fn.displayName support

Support for the non-standard fn.displayName has been deprecated. Use fn.name instead.

Deprecation of non-standard `fn.displayName` support

Chrome has traditionally supported the non-standard fn.displayName property as a way for developers to control debug names for functions that show up in error.stack and in DevTools stack traces. In the example above, the Call Stack would previously show noLongerSupport.

Replace fn.displayName with the standard fn.name, which was made configurable (via Object.defineProperty) in ECMAScript 2015 to replace the non-standardfn.displayName property.

Support for fn.displayName has been unreliable and not consistent across browser engines. It slows down stack trace collection, a cost that developers always pay no matter whether they actually use fn.displayName or not.

Use `fn.name` to control debug names for functions

Chromium issue: 1177685

Deprecation of Don't show Chrome Data Saver warning in the Settings menu

The Don't show Chrome Data Saver warning setting is removed because Chrome Data Saver has been deprecated.

Deprecated “Don't show Chrome Data Saver warning” settings

Chromium issue: 1056922

##Experimental features

Automatic low-contrast issue reporting in the Issues tab

DevTools added experimental support for reporting contrast issues in the Issues tab automatically.

Low-contrast text is the most common automatically-detectable accessibility issue on the web. Displaying these issues in the Issues tab helps developers discover these issues easier.

Open a page with low-contrast issues (e.g. this demo). Then, open the Issues tabs by clicking on the Issues count button in the Console status bar to view the issues.

Automatic low-contrast issue reporting

Chromium issue: 1155460

Full accessibility tree view in the Elements panel

You can now toggle to view the new and improved full accessibility tree view of a page.

The current accessibility pane provides a limited display of its nodes, only showing the direct ancestor chain from the root node to the inspected node. The new accessibility tree view aims to improve that and makes the accessibility tree more explorable, useful, and easier for developers to use.

After enabling the experiment, a new button will show in the Elements panel, click to switch between the existing DOM tree and the full accessibility tree.

Please note that this is an early-stage experiment. We plan to improve and expand the functionality over time.

Full accessibility tree view

Chromium issue: 887173

<<../../_shared/devtools-feedback.md>>

<<../../_shared/canary.md>>

<<../../_shared/discover.md>>


This content originally appeared on Updates and was authored by


Print Share Comment Cite Upload Translate Updates
APA

| Sciencx (2021-02-28T00:00:00+00:00) What’s New In DevTools (Chrome 90). Retrieved from https://www.scien.cx/2021/02/28/whats-new-in-devtools-chrome-90/

MLA
" » What’s New In DevTools (Chrome 90)." | Sciencx - Sunday February 28, 2021, https://www.scien.cx/2021/02/28/whats-new-in-devtools-chrome-90/
HARVARD
| Sciencx Sunday February 28, 2021 » What’s New In DevTools (Chrome 90)., viewed ,<https://www.scien.cx/2021/02/28/whats-new-in-devtools-chrome-90/>
VANCOUVER
| Sciencx - » What’s New In DevTools (Chrome 90). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/02/28/whats-new-in-devtools-chrome-90/
CHICAGO
" » What’s New In DevTools (Chrome 90)." | Sciencx - Accessed . https://www.scien.cx/2021/02/28/whats-new-in-devtools-chrome-90/
IEEE
" » What’s New In DevTools (Chrome 90)." | Sciencx [Online]. Available: https://www.scien.cx/2021/02/28/whats-new-in-devtools-chrome-90/. [Accessed: ]
rf:citation
» What’s New In DevTools (Chrome 90) | | Sciencx | https://www.scien.cx/2021/02/28/whats-new-in-devtools-chrome-90/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.