What's New in DevTools (Chrome 112)

Sofia Emelianova

Jecelyn Yeen

Recorder updates

Replay extensions support

The Recorder introduces support for custom replay options that you can embed into DevTools with an extension.

Try out the example extension. Select the new custom replay option to open the custom replay UI.

Custom replay UI.

To customize the Recorder to your needs and integrate it with your tools, consider developing your own extension: explore the chrome.devtools.recorder API and check out more extension examples.

Chromium issue: 1400243.

Record with pierce selectors

In addition to custom, CSS, ARIA, text, and XPath selectors, you can now record using pierce selectors. These selectors behave like CSS ones but can also pierce through shadow roots.

Start a new recording on a page with shadow DOM and check Pierce in Selector types to record. Record your interaction with elements in the shadow DOM and inspect the corresponding step.

Setting the Recorder to use pierce selectors; Pierce selector in action.

Chromium issue: 1411188.

Export as a Puppeteer script with Lighthouse analysis

The Recorder introduces a new export option: Puppeteer (including Lighthouse analysis). With Puppeteer, you can automate and control Chrome. With Lighthouse, you can capture and improve your website's performance.

Open your recording, click Export, select the new option, and save the .js file.

Export Puppeteer (including Lighthouse analysis).

Run the Puppeteer script to get a Lighthouse report in a flow.report.html file.

The Lighthouse report opened in Chrome.

Get extensions

Explore options to customize your recorder experience, for example, with custom export options. Get extensions for the Recorder by clicking the Export > Get extensions in a recording.

The Get extensions option in the Export drop-down menu.

Feel free to add your own extension to the list of Recorder Extensions. We look forward to seeing yours on the list!

Chromium issues: 1417104, 1413168.

Elements > Styles updates

CSS documentation

How many times a day do you look up documentation on CSS properties? The Elements > Styles pane now shows you a short description when you hover over a property.

The tooltip with documentation on a CSS property.

The tooltip also has a Learn more link that takes you to an MDN CSS Reference on this property.

If you know CSS well, you might find the tooltips bothersome. To turn them all off, check Don't show.

To turn them back on, check Settings > Preferences > Elements > Show CSS documentation tooltip.

Chromium issue: 1401107.

CSS nesting support

The Elements > Styles pane now recognizes CSS Nesting syntax and applies nested styles to the right elements.

Chromium issue: 1172985.

Marking logpoints and conditional breakpoints in the Console

Further improving the enhanced breakpoint UX, the Console now marks messages triggered by breakpoints:

console.* calls in conditional breakpoints with an orange question mark ?
Logpoint messages with pink two dots ..

Changes to how the Console now displays messages triggered by breakpoints: with icons and proper source link.

The Console now gives you proper anchor links to breakpoints in source files instead of VM<number> scripts that Chrome creates to run any piece of Javascript on V8.

Click the link next to the breakpoint message to jump directly to the breakpoint editor.

The anchor link next to a logpoint message that opens the breakpoint editor.

Chromium issue: 1027458.

Ignore irrelevant scripts during debugging

To help you focus on the most important parts of your code, you can now add irrelevant scripts to the Ignore List right from the file tree on the Sources > Page pane.

Right-click any script or folder and select one of the ignore-related options. You may see options to add or remove the script or folder to and from the list. The Debugger ignores scripts added to the list and omits them in the call stack.

Context menus of a folder and script with ignore-related options.

All ignore-listed scripts and folders are grayed out in the file tree.

Ignore-listed scripts and folders are grayed out, you can hide them with an experimental option in the More options drop-down menu.

If you select an ignored script, the Configure button takes you to Settings > Ignore List. You can also hide ignored sources from the file tree with > Hide ignore-listed sources .

Chromium issue: 883325.

JavaScript Profiler deprecation started

As early as Chrome 58, the DevTools team planned to eventually deprecate the JavaScript Profiler and have Node.js and Deno developers use the Performance panel for profiling JavaScript CPU performance.

This DevTools version (112) starts the four-phase JavaScript Profiler deprecation. The JavaScript Profiler panel now shows the corresponding warning banner.

Instead of the Profiler, use the Performance panel to profile CPU.

Learn more and provide feedback in the corresponding RFC and crbug.com/1354548.

Chromium issue: 1417647.

Emulate reduced contrast

The Rendering tab adds a new option to the Emulate vision deficiencies list—Reduced contrast. With this option, you can discover how your website looks to people with reduced contrast sensitivity.

The reduced contrast option selected under the 'Emulate vision deficiencies' functionality.

Note that the list options have been updated to tell you what color insensitivity the options represent.

With DevTools, you can find and fix all contrast issues at once. For more information, see Make your website more readable.

Chromium issues: 1412719, 1412721.

Lighthouse 10

The Lighthouse panel now runs Lighthouse 10.0.1. For more details, see What's new in Lighthouse 10.0.1.

To learn the basics of using the Lighthouse panel in DevTools, see Lighthouse: Optimize website speed.

Lighthouse > > Legacy navigation is now disabled by default. This option uses legacy Lighthouse configuration in navigation mode.

Disabled legacy navigation.

Lighthouse 10 now uses Moto G Power as the default emulation device. DevTools added this device to Settings > Devices.

Moto G Power in the Devices list.

Chromium issue: 772558.

A Console warning to remove your no-op service worker fetch handler

Chrome 112 skips no-op (no operation) service worker fetch handlers because they may slow down navigation but don't serve a purpose. Such handlers are no longer required for your website to quialify as a Progressive Web App.

The Console now shows a warning if it finds a no-op fetch handler on your website. Consider removing it.

A no-op fetch handler and the corresponding warning in the Console.

Chromium issue: 1347319.

Miscellaneous highlights

These are some noteworthy fixes in this release:

The Sources > Breakpoints pane now shows differentiating file paths next to ambiguous file names (1403924).
The Main section in the flame chart of the Performance panel now designates CpuProfiler::StartProfiling as Profiler Overhead (1358602).
DevTools improved autocompletion:
- Sources: Consistent completions of any word (1320204).
- Console: Arrow down selects the first suggestion and suggestions get Tab hints (1276960).
DevTools added an event listener breakpoint to let you pause when you open a Document Picture-in-Picture window (1315352).
DevTools set up a workaround that properly displays Vue2 webpack artifacts as JavaScript (1416562).
A Console setting gets a better name: Automatically expand console.trace() messages. (1139616).

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.