What's New In DevTools (Chrome 101)

Published on Updated on

Translated to: Español, Português, 한국어, 中文, Pусский, 日本語

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

Import and export recorded user flows as a JSON file

The Recorder panel now supports importing and exporting user flow recordings as a JSON file. This addition makes it easier to share user flows and can be useful for bug reporting.

For example, download this JSON file. You can import it with the import button and replay the user flow.

Apart from that, you can export the recording as well. After recording a user flow, click on the export button. There are 3 export options:

  • Export as a JSON file. Download the recording as a JSON file.
  • Export as a @puppeteer/replay script. Download the recording as a Puppeteer Replay script.
  • Export as a Puppeteer script . Download the recording as Puppeteer script.

Consult the documentation to learn more about the differences between these options.

Export options in the Recorder panel

Chromium issue: 1257499

View cascade layers in the Styles pane

Cascade layers enable more explicit control of your CSS files to prevent style-specificity conflicts. This is particularly useful for large codebases, design systems, and when managing third party styles in applications.

In this example, there are 3 cascade layers defined: page, component and base. In the Styles pane, you can view each layer and its styles.

Click on the layer name to view the layer order. The page layer has the highest specificity, therefore the box background is green.

View cascade layers in the Styles pane

Chromium issue: 1240596

Support for the hwb() color function

You can now view and edit HWB color format in DevTools.

In the Styles pane, hold the Shift key and click on any color preview to change the color format. The HWB color format is added.

Alternatively, you can change the color format to HWB in the color picker.

hwb() color function

Improved the display of private properties

DevTools now properly evaluates and displays private accessors. Previously, you couldn't expand classes with private accessors in the Console and the Sources panel.

private properties in the Console

Chromium issues: 1296855, https://crbug.com/1303407

Miscellaneous highlights

These are some noteworthy fixes in this release:

  • The Back/forward cache now displays the extension ID which blocked bfcache when present.( 1284548)
  • Fixed autocompletion support for array-like objects, CSS class names, map.get and HTML tags. (1297101, 1297491, 1293807, 1296983)
  • Fixed incorrect highlights when double-clicking on words and undoing autocomplete. (1298437, 1298667)
  • Fixed comment keyboard shortcut in the Sources panel. (1296535)
  • Re-enable support for using Alt (Options) key for multi selection in the Sources panel. (1304070)

[Experimental] New timespan and snapshot mode in the Lighthouse panel

To enable the experiment, enable the Use Lighthouse panel with timespan and snapshot modes checkbox under Settings > Experiments.

Apart from the existing navigation mode, the Lighthouse panel now support two more modes on measuring user flows - timespan and snapshot.

For example, you can use the timespan reports to analyze user interactions. Open this demo page. Select the Timespan mode and click on Start timespan. On the page, click on a coffee and end the timespan. Read the report to find out the Total Blocking Time and Cumulative Layout Shift that were caused by the interaction.

Each mode has its own unique use cases, benefits, and limitations. Please refer to the Lighthouse documentation for more information.

Timespan and snapshot mode in the Lighthouse panelhouse

Chromium issue: 772558

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

Updated on Improve article

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