What's New In DevTools (Chrome 98)

Published on Thursday, January 13, 2022 • Updated on Thursday, January 13, 2022

Developer advocate working on Chrome DevTools at Google.

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

The new Full-page accessibility tree makes it easier for you to get an overview of the full-page accessibility tree and help you better understand how your web content is exposed to assistive technology.

In the Elements panel, open the Accessibility pane and select Enable full-page accessibility tree checkbox. Then, reload DevTools and you will see a new accessibility button in the Elements panel.

You can click on it to toggle to the Full-page accessibility tree view. You can expand nodes or click to see details in the Accessibility pane.

Select a node and toggle back to the DOM tree view. The corresponding DOM node is selected now. This is a great way to understand the mapping between the DOM node and its accessibility tree node. This works for DOM tree ⬌ Accessibility tree view too!

Previously, the accessibility tree was available in the Accessibility pane. The view is limited, it only enables you to explore a single node and its ancestors.

Our team is still actively working on this preview feature. We are looking for your feedback for further enhancements!

Chromium issue: 887173

More precise changes in the Changes tab

The code changes in the Changes tab is pretty-printed automatically.

Previously, it was hard to trace the actual changes of minified source code because all the code is shown in a single line.

Chromium issues: 1238818, 1268754 , 1086491

Set longer timeout for user flow recording

You can now adjust the Timeout settings in the Recorder for all steps or a specific step. This is useful especially for pages with slow network requests and lengthy animation.

For example, I recorded a user flow on this demo page to load and click on the menu item. However, the loading of the menu items is slow (it takes 6 seconds). The replay of this user flow failed because it exceeds 5 seconds (the default timeout).

We can use the new Timeout settings to fix this. Expand the step which we click on the menu item. Edit the step by Add timeout and set it to 6000 milliseconds (equal to 6s).

Optionally, you can adjust the Timeout in the Replay settings for all the steps. Expand the Replay settings and edit the Timeout value.

timeout settings for user flow recording

Chromium issue: 1257499

Ensure your pages are cacheable with the Back/forward cache tab

Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation.

The new Back/forward cache tab can help you test your pages to ensure they're optimized for bfcache, and identify any issues that may be preventing them from being eligible.

To test a particular page, navigate to it in Chrome and then in DevTools go to Application > Back-forward Cache. Next, click the Test back/forward cache button and DevTools will attempt to navigate away and back to determine whether the page could be restored from bfcache.

As web developers, it's critical to know how to optimize your pages for bfcache across all browsers because it will significantly improve the browsing experience for users—especially those with slower networks or devices.

Chromium issue: 1110752

New Properties pane filter

If you want to focus on a specific property in the Properties pane, you can now type that property name or value in the new Filter textbox.

By default, properties whose value is null or undefined are not shown. Enable the Show all checkbox to view all properties.

These enhancements allow you to get to the properties you care for quicker and thus improve your productivity!

Chromium issue: 1269674

Emulate the CSS forced-colors media feature

The forced-colors CSS media feature is used to detect if the user agent has enabled a forced colors mode (e.g. Windows High Contrast mode) where it enforces a user-chosen limited color palette on the page.

Open the Command Menu, run the Show Rendering command, and then set the Emulate CSS media feature forced-colors dropdown.

Chromium issue: 1130859

Show rulers on hover command

You can now open the Command Menu and run the Show rulers on hover command. The page rulers make it easier to measure the width and height of an element.

Previously, you can only enable the page rulers via Settings > Show rulers checkbox.

Chromium issue: 1270562

Support `row-reverse` and `column-reverse` in the Flexbox editor

The Flexbox editor added two new buttons to support row-reverse and column-reverse in flex-direction.

Chromium issue: 1263866

New keyboard shortcuts to replay XHR and expand all search results

Keyboard shortcuts to replay XHR in the Network panel

Select a XHR request in the Network panel and press R on the keyboard to replay the XHR. Previously, you can only replay the XHR via the context menu (right click > Replay XHR)

Chromium issue: 1050021

Keyboard shortcut to expand all search results

A new shortcut is added in the Search tab allowing you to expand and collapse all the search results. Previously, you could only expand and collapse the search results by clicking on one file at a time.

Open the search tab via Esc > 3-dot menu > Search. Enter a search string (e.g. function) and press Enter to see the list of search results. Focus on the search results and use the following shortcut to expand/collapse the search files:

Windows / Linux - Ctrl + Shift + { or }
MacOS - Cmd + Options + { or }

Go to the keyboard shortcuts for reference of keyboard shortcuts in Chrome DevTools.

Chromium issue: 1255073

Lighthouse 9 in the Lighthouse panel

The Lighthouse panel is now running Lighthouse 9. Lighthouse will now list all the elements sharing the same id.

Non-unique element id is a common accessibility problem. For instance, the id referenced in an aria-labelledby attribute is used on multiple elements.

Check out the What’s new in Lighthouse 9.0 for more details on the updates.

A Lighthouse audit for 'All focusable elements must have a unique `id`', showing two elements, both with the same `id`

Chromium issue: 772558

Improved Sources panel

Loads of stability improvements in the Sources panel as we upgraded it to use CodeMirror 6. Here are few notable improvements:

Significantly faster when opening large files (e.g. WASM, JavaScript)
No more random scrolling when stepping through code
Improved auto-complete suggestions for editable sources (e.g. snippets, local override)

Chromium issue: 1241848

Miscellaneous highlights

These are some noteworthy fixes in this release:

Properly displaying the waterfall diagram of network requests. Previously, the style was broken. (1275501)
The code highlight was broken when searching in documents with very long lines in the Sources panel. It’s now fixed. (1275496)
No more duplicate Payload tab in network requests. (1273972)
Fixed the missing layout shifts details in the Summary section of the Performance panel. (1259606)
Support arbitrary characters (e.g. ,, .), in Network Search queries. (1267196)

[Experimental] Endpoints in the Reporting API pane

To enable the experiment, check the Enable Reporting API panel in the Application panel checkbox under Settings > Experiments.

The experimental Reporting API pane was introduced in Chrome 96 to help you monitor the reports generated on your page and their status.

The Endpoints section is now available. It gives you an overview of all the endpoints configured in the Reporting-Endpoints header.

Learn to use the Reporting API to monitor security violations, deprecated API calls, and more.

Chromium issue: 1200732

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.