What's New In DevTools (Chrome 92)

CSS grid editor

A highly requested feature. You can now preview and author CSS Grid with the new CSS Grid editor!

When an HTML element on your page has display: grid or display: inline-grid applied to it, you can see an icon appear next to it in the Styles pane. Click the icon to toggle the CSS grid editor. Here you can preview the potential changes with the on screen icons (e.g. justify-content: space-around) and author the grid appearance with just one click.

Chromium issue: 1203241

Support for const redeclarations in the Console

The Console now supports redeclaration of const statement, in addition to the existing let and class redeclarations. The inability to redeclare was a common annoyance for web developers who use the Console to experiment with new JavaScript code.

This allows developers to copy-paste code into the DevTools console to see how it works or experiment, make small changes to the code, and repeat the process without refreshing the page. Previously, DevTools threw a syntax error if the code redeclared a const binding.

Refer to the example below. const redeclaration is supported across separate REPL scripts (refer to variable a). Take note that the following scenarios are not supported by design:

• const redeclaration of page scripts is not allowed in REPL scripts
• const redeclaration within the same REPL script is not allowed (refer to variable b)

Chromium issue: 1076427

Source order viewer

You can now view the order of source elements on screen for better accessibility inspection.

The order of content in an HTML document is important for search engine optimization and accessibility. The newer CSS features allow developers to create content that looks very different in its on-screen order than what is in the HTML document. This is a big accessibility problem as screen reader users would get a different, most likely confusing experience than sighted users.

Chromium issue: 1094406

New shortcut to view frame details

View iframe details by right-clicking on the iframe element in the Elements panel, and select Show frame details.

This takes you to a view of the iframe's details in the Application panel where you can examine document details, security & isolation status, permissions policy, and more to debug potential issues.

Chromium issue: 1192084

Enhanced CORS debugging support

Cross-origin resource sharing (CORS) errors are now surfaced in the Issues tab. There are various reasons causing CORS errors. Click to expand each issue to understand the potential causes and solutions.

Chromium issue: 1141824

Network panel updates

Rename XHR label to Fetch/XHR

The XHR label is now renamed to Fetch/XHR. This change makes it clearer that this filter includes both XMLHttpRequest and Fetch API network requests.

Chromium issue: 1201398

Filter Wasm resource type in the Network panel

You can now click on the new Wasm button to filter the Wasm network requests.

Chromium issue: 1103638

User-Agent Client Hints for devices in the Network conditions tab

User-Agent Client Hints are now applied for devices in the User agent field under Network conditions tab.

User-Agent Client Hints are a new expansion to the Client Hints API, that enables developers to access information about a user's browser in a privacy-preserving and ergonomic way.

Chromium issue: 1174299

Report Quirks mode issues in the Issues tab

DevTools now reports Quirks Mode and Limited-quirks Mode issues.

Quirks Mode and Limited-quirks Mode are legacy browser modes from before the web standards were made. These modes emulate pre-standard-era layout behaviors that often cause unexpected visual effects.

When debugging layout issues, developers might think they are caused by user-authored CSS or HTML bugs, while the real problem is the Compat Mode the page is in. DevTools provides suggestions for fixing it.

Chromium issue: 622660

Include Compute Intersections in the Performance panel

DevTools now show the Compute Intersections in the flame chart. These changes help you to identify the intersection observers events and debug on its potential performance overheads.

Chromium issue: 1199137

Lighthouse 7.5 in the Lighthouse panel

The Lighthouse panel is now running Lighthouse 7.5. The "missing explicit width and height" warning is now removed for images with aspect-ratio defined in CSS. Previously, Lighthouse showed warnings for images without width and height defined.

Check out the release notes for a full list of changes.

Chromium issue: 772558

Deprecated "Restart frame" context menu in the call stack

The Restart frame option is now deprecated. This feature requires further development to work well, it is currently broken and often crashes.

Chromium issue: 1203606

[Experimental] Protocol monitor

Chrome DevTools uses the Chrome DevTools Protocol (CDP) to instrument, inspect, debug and profile Chrome browsers. The Protocol monitor provides you a way to view all the CDP requests and responses made by DevTools.

Two new functions added to facilitate the testing of CDP:

• The new Save button allows you to download the recorded messages as a JSON file
• A new field that allows you to send a raw CDP command directly

Chromium issues: 1204004, 1204466

[Experimental] Puppeteer Recorder

The Puppeteer recorder now generates a list of steps based on your interaction with the browser, whereas previously DevTools generated a Puppeteer script directly instead. A new Export button is added to allow you export the steps as a Puppeteer script.

After recording the steps, you can use the new Replay button to replay the steps. Follow the instructions here to learn how to get started with recording.

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

Chromium issue: 1199787

Download the preview channels

Consider using the Chrome Canary, Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com.
• Report a DevTools issue using the More options     > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.