Recorder replay customization, CSS documentation, ignore-listing irrelevant scripts, enhanced logpoint debugging, and more.

What's New in DevTools (Chrome 112)

Published on

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

No 'What's new in DevTools' video for this release. Check out the latest DevTools Tips video to learn how to identify and fix CSS issues with the Styles pane.

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 Checkbox. 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. 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. 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 Checkbox. Don't show.

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

DevTools pulls the descriptions for tooltips from VS Code Custom Data.

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:

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. Settings > Ignore List. You can also hide ignored sources from the file tree with Three-dot menu. > Hide ignore-listed sources Experimental..

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.

Deprecation banner at the top of the Profiler.

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 on the Rendering > Emulate vision deficiencies.

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 > Settings. > Empty checkbox. 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. 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:

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.