What's New In DevTools (Chrome 92)

Published on Updated on

Interested in helping improve DevTools? Sign up to participate in Google User Research here.

CSS grid editor #

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

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)
const redeclarations

Chromium issue: 1076427

Source order viewer #

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

Source order viewer

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.

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.

Frame details view

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.

CORS issues in the Issues tab

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.

Fetch/XHR label

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.

Filter by Wasm

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.

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

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.

Report Quirks mode issues in the Issues tab

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.

Compute Intersections in the Performance panel

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.

Deprecated Restart frame context menu

Chromium issue: 1203606

[Experimental] Protocol monitor #

To enable the experiment, check the Protocol Monitor checkbox under Settings > Experiments.

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

Protocol monitor

Chromium issues: 1204004, 1204466

[Experimental] Puppeteer Recorder #

To enable the experiment, check the Recorder checkbox under Settings > Experiments.

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.

Puppeteer Recorder

Chromium issue: 1199787

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.