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!

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

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

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

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   More   > 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.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59