What's New in DevTools (Chrome 115)

Sofia Emelianova
Sofia Emelianova

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

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

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