What's New In DevTools (Chrome 99)

Published on Updated on

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

Throttling WebSocket requests

The Network panel now supports throttling web socket requests. Previously, the network throttling didn't work on web socket requests.

Open the Network panel, click on a web socket request and open the Messages tab to observe the message transfers. Select Slow 3G to throttle the speed.

Throttling WebSocket requests

Chromium issue: 423246

New Reporting API pane in the Application panel

Use the new Reporting API pane to monitor the reports generated on your page and their status.

The Reporting API is designed to help you monitor security violations of your page, deprecated API calls, and more.

Open a page which uses the Reporting API (e.g. demo page). In the Application panel, scroll down to the Background services section and select the Reporting API pane.

The Reports section shows you a list of reports generated on your page and their status. Click on it to view the report’s details.

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

Reporting API pane

Chromium issue: 1205856

Support wait until element is visible/clickable in the Recorder panel

When replaying a user flow recording, the Recorder panel will now wait until the element is visible or clickable in the viewport or try to automatically scroll the element into the viewport before replaying the step. Previously, the replay would fail immediately.

Here is an example of an off-screen menu positioned outside of the viewport and slide in when activated. The user flow is to toggle the menu, and click on the menu item. Previously, the replay would fail at the last step, because the menu item is still sliding in and not visible in the viewport yet. It’s fixed now.

Chromium issue: 1257499

Better console styling, formatting and filtering

Properly style log messages with ANSI escape code

You can now use the ANSI escape sequences to properly style console messages. Previously, DevTools console had very limited (and partly broken) support for ANSI escape sequences.

It is common for Node.js developers to colorize log messages via ANSI escape sequences, often with the help of some styling libraries like chalk, colors, ansi-colors, kleur, etc.

With these changes, you can now debug your Node.js applications seamlessly using DevTools, with proper colorized console messages. Open this demo to view it yourself!

To learn more about formatting & styling console messages with DevTools, go to format and style messages in the Console documentation.

console styling

Chromium issues: 1282837, 1282076

Properly support %s, %d, %i and %f format specifiers

The Console now properly performs the %s, %d, %i, and %f type conversions as specified in the Console Standard. Previously, the conversation result was inconsistent.

support format specifiers in console messege

Chromium issues: 1277944, 1282076

More intuitive console group filter

When filtering the console message, a console message is now shown if its message content matches the filter or the title of the group (or the ancestor group) matches the filter. Previously, the console group title would show despite the filter.

In addition, if a console message is shown, the group (or the ancestor group) it belongs to is now shown as well.

console group filter

Chromium issue: 1068788

Source maps improvements

Debug Chrome extension with source map files

You can now debug Chrome extension with source map files. Previously, DevTools only supported inline sourcemap for Chrome extension debugging.

Debug Chrome extension with source map files

Chromium issue: 212374

Improved source folder tree in the Sources panel

The source folder tree in the Sources panel is now improved with less clutter in the folder structures and naming (e.g. “../”, “./”, etc). Under the hood, this is the result of normalizing the absolute source URLs in the source maps.

Improved source folder tree in the Sources panel

Chromium issue: 1284737

Display worker source files in the Sources panel

Worker (e.g. web worker, service worker) source files with relative SourceURL are now displayed in the Source panel. Previously, worker source files were not handled correctly.

ALT_TEXT_HERE

Chromium issue: 1277002

Chrome’s Auto Dark Theme updates

The Auto Dark Theme emulation UI is now simplified. It is a checkbox now, it was a dropdown previously.

Apart from that, when the Auto Dark Theme is enabled, the Emulate prefers-color-scheme dropdown will be disabled and set to prefers-color-scheme: dark automatically.

Chrome 96 introduces an Origin Trial for Auto Dark Theme on Android. With this feature, the browser applies an automatically generated dark theme to light themed sites, when the user has opted into dark themes in the Operating System.

Auto Dark Theme emulation

Chromium issue: 1243309

Touch-friendly color-picker and split pane

You can now select color, and resize the Drawer in DevTools with fingers or stylus on touchscreen devices.

Here is an example captured with the Google Pixelbook device touchscreen.

Chromium issues: 1284245, 1284995

Miscellaneous highlights

These are some noteworthy fixes in this release:

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

Updated on Improve article

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