Explore Chrome 90 DevTools: New Flexbox Debugger, Core Web Vitals Overlay, and More

Chrome 90 has been released for a while, and DevTools now includes several new features. This article provides a simple translation of the official "What's New In DevTools (Chrome 90)" documentation.

CSS flexbox debugging tool

DevTools now includes a brand‑new CSS flexbox debugging tool.

When an element’s CSS is set to

display: flex

or

display: inline-flex

, a

flex

badge appears in the Elements panel. Clicking the badge shows a flex layout overlay on the page. In the Styles panel, clicking the

display: flex

or

display: inline-flex

icon opens the Flexbox editor for quick property editing.

Additionally, the Layout panel includes a Flexbox area that displays all flex containers on the page, allowing rapid activation of any element’s flex overlay.

Core Web Vitals overlay

The Core Web Vitals overlay provides better visualization and measurement of page performance. Core Web Vitals, introduced by Google, are crucial metrics for user experience. Open the Command Menu, run Show Rendering , then select the Core Web Vitals checkbox to display the overlay.

The overlay shows three metrics:

Largest Contentful Paint (LCP): measures page load performance; ideal LCP is under 2.5 seconds.

First Input Delay (FID): measures interactivity; ideal FID is under 100 ms.

Cumulative Layout Shift (CLS): measures visual stability; ideal CLS is below 0.1.

Issues tab updates

Issue count moved to Console status bar

A new button in the Console status bar displays the number of issues, making them more visible, and removes issue information from the Console panel itself.

Report Trusted Web Activity issues

The Issues tab can now report Trusted Web Activity issues, helping developers understand and fix them.

Open a Trusted Web Activity app, click the issue count button in the Console status bar, then open the Issues tab to view detailed information.

String formatting in Console

The Console can now format strings into valid JavaScript string literals. Previously, double quotes were not decoded when outputting strings.

Trust Tokens panel

DevTools adds a new Trust Tokens panel under Application, showing available Trust Tokens in the current browsing context. Trust Tokens are a new API to combat fraud and differentiate bots from real users without passive tracking.

Enable CSS color‑gamut media feature

The color‑gamut media query tests the approximate color range supported by the browser and output device. If a query matches

color-gamut: p3

, the device supports the Display‑P3 color space.

Open the Command Menu, run Show Rendering , then select Emulate CSS media feature color-gamut to set the desired value.

Progressive Web Apps tool updates

DevTools now shows more detailed warning information in the Console during PWA installation.

If a PWA manifest’s

description

exceeds 324 characters, a warning appears in the Manifest panel.

If the manifest’s

screenshot

does not meet requirements, a warning is shown in the Manifest panel.

Network panel adds Remote Address Space

Each network request’s IP address space can be viewed in the Network panel under

Remote Address Space

.

Performance improvements

When DevTools is open, page loading performance improves, with up to a ten‑fold boost in extreme cases.

DevTools now collects stack traces more efficiently, reducing the overhead that previously slowed pages when DevTools was open.

Allowed/disallowed features in Frame details view

The Frame details view now displays a list of allowed and disallowed features controlled by the Permissions Policy.

Permissions Policy is a web platform API that lets sites enable or block certain browser features in their own frames or embedded iframes.

Cookies panel adds SameParty column

The Cookies panel now includes a

SameParty

column. The

SameParty

boolean indicates whether sources in the same First‑Party Set may include the cookie in requests.

fn.displayName deprecated

The non‑standard

fn.displayName

property is deprecated; use

fn.name

instead.

Chrome has historically supported

fn.displayName

for naming functions in error stacks, but it slows stack‑trace collection. Developers can set

fn.name

via

Object.defineProperty

if needed.

Settings: "Don't show Chrome Data Saver warning" deprecated

Since Chrome Data Saver has been removed, the "Don't show Chrome Data Saver warning" setting is also deprecated.

Experimental features

Automatic low‑contrast issue reporting in Issues panel

Enable via Settings → Experiments → Enable automatic contrast issue reporting via the Issues panel.

When a page has a contrast issue, it appears in the Issues tab, indicating content that may be hard for users to see.

Full accessibility tree view in Elements pane

Enable via Settings → Experiments → Full accessibility tree view in Elements pane.

In the Elements panel, click the top

Switch to Accessibility Tree view

button to switch to the accessibility tree view.