What's New in DevTools (Chrome 115) Stay organized with collections Save and categorize content based on your preferences.

[Sofia Emelianova]

Sofia Emelianova

GitHub

Elements improvements

New CSS subgrid badge

The Elements panel gets a new subgrid badge for subgrid. This feature is currently experimental in Chrome Canary.

To inspect and debug a nested grid that is a subgrid, and therefore inheriting the number and size of tracks from its parent, click the badge. It toggles an overlay that shows columns, rows, and their numbers on top of the element in the viewport.

[The subgrid badge and the overlay in the viewport.]

For the list of all badges in the Elements panel, see the Badges reference.

Chromium issue: 1442536.

Selector specificity in tooltips

In Elements > Styles, hover over a selector name to see its specificity weight in a tooltip.

[A tooltip with specificity weight of a selector.]

Chromium issue: 1204932.

Values of custom CSS properties in tooltips

In Elements > Styles, hover over a custom CSS property name to see its value in a tooltip.

[The tooltip with a value of the custom CSS property.]

The DevTools team would like to express gratitude to and Suyan for landing this improvement.

Chromium issue: 1380779.

Sources improvements

CSS syntax highlighting

The Sources panel gets the following for preprocessed CSS files, such as SASS, SCSS, and LESS:

• Syntax highlighting.
• Inline editors support. These editors are similar to those in Elements > Styles, for example, Color Picker and Easing Editor.

[Improved CSS syntax highlighting and inline editors support in Sources.]

Chromium issues: 1302261, 1392085.

Shortcut to set conditional breakpoints

You can now set conditional breakpoints faster with a shortcut. To open the breakpoint dialog, hold Command (MacOS) or Control (Windows / Linux) and click the line number in the left column of the Sources > Editor.

[The line number in the left column and the breakpoint dialog.]

Chromium issue: 1405767.

Application > Bounce Tracking Mitigations

Bounce Tracking Mitigations experiment in Chrome lets you identify and delete the state of sites that appear to perform cross-site tracking using the bounce tracking technique. The Application > Background Services pane gets a new Bounce Tracking Mitigations tab that lets you manually force tracking mitigations and lists the sites whose states were deleted.

Check out this security feature:

1. Block third-party cookies in Chrome. Navigate to and enable [Three-dot menu.] > Settings > [Security.] Privacy and security > Cookies and other site data > [Radio button checked.] Block third-party cookies.
2. In chrome://flags, set the Bounce Tracking Mitigations experiment to Enabled With Deletion.
3. Inspect this demo page, open Application > Background Services > Bounce Tracking Mitigations, click a bounce link on the page, wait (10 seconds) for Chrome to record the bounce, and click Force run to delete the state immediately.

[Bounce Tracking Mitigations lists a state deletion.]

Additionally, the Issues tab warns you about the upcoming state deletion.

Chromium issue: 1432303.

Lighthouse 10.2.0

The Lighthouse panel now runs Lighthouse 10.2.0. Most notably, the Largest Contentful Paint check gets a table with phase calculations for simulated and DevTools throttling. See also the full list of changes.

[The LCP phase table.]

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

Chromium issue: 772558.

Ignore content scripts by default

The [Settings.] Settings > Ignore List > [Checkbox.] Content scripts injected by extensions is now enabled by default.

With this setting enabled:

• The Debugger ignores such scripts and doesn't stop on exceptions thrown by them.
• The Sources > Call Stack pane skips ignored frames. To turn the skipping off here, check [Checkbox.] Show ignore-listed frames.
• The Console collapses ignored frames in stack traces. Click Show N more frames to expand, and Show less to collapse again.

[Content scripts injected by extensions enabled by default. Find this by visiting Settings, then Ignore list.]

Additionally, the checkboxes in Ignore List got clearer text.

Chromium issues: 1440958, 1364501.

Network > Response pretty-printing by default

The Network > Response pane now pretty-prints minified response bodies by default, similar to the Sources panel.

[Enabled pretty-printing in Response window of Network tab.]

Additionally, SVG files get syntax highlighting.

[SVG syntax highlighting.]

Chromium issues: 1382752, 1385374.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

• [Settings.] Settings > Devices: Added Facebook for Android v407 on Pixel 6 to the list of agent strings.
• Network: Added the Clear network log shortcut (1444991):
  • MacOS: Command + K
  • Windows/Linux: Control + L
• Removed the Recorder > Recording N > Performance insights panel drop-down option (1414773).
• Stylesheets that failed to load are now hidden from the navigator tree (1386059).
• Performance: Fixed incorrect display of the expandable Interactions track (1432510).
• Elements: Stylesheets that failed to load are now underscored with wavy lines (1440626).
• The Debugger doesn't automatically step in WebAssembly when there is no plugin for the respective language (1443342).
• The shortcut that moves the cursor one word at at time is restored for CSS files in Sources > Editor (1241848):
  • MacOS: Alt + Arrow
  • Windows/Linux: Ctrl + Arrow

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.

• Submit feedback and feature requests to us at crbug.com.
• Report a DevTools issue using the more_vert More options > Help > Report a DevTools issue in DevTools.
• Tweet at @ChromeDevTools.
• Leave comments on 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.