What's New In DevTools (Chrome 99)

Jecelyn Yeen

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, let you test cutting-edge web platform APIs, and help you find issues on your site before your users do!

Get in touch with the Chrome DevTools team

Use the following options to discuss the new features, updates, or anything else related to DevTools.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.