What's New In DevTools (Chrome 92)
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!
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
const redeclarations in the Console #
The Console now supports redeclaration of
const statement, in addition to the existing
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
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:
constredeclaration of page scripts is not allowed in REPL scripts
constredeclaration within the same REPL script is not allowed (refer to variable
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 #
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 #
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 #
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
[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.
Chromium issue: 1199787