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.