What's new in DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Network panel improvements

This version brings an number of improvements to the Network panel.

Network filters reimagined

The Network panel gets new filters, reimagined based on your feedback. The type-specific filters stay the same — a set of badges in a clean multi-select bar.

To declutter the UI, hide-, block-, and third-party-related checkboxes move under a drop-down list. The list has a number that tells you how many filters are checked under the drop-down.

Before and after moving hide-, block- and third-party-related filters under a drop-down.

To bring back the old filter design, clear Settings > Experiments > Redesign of the filter bar in the Network panel.

Let us know what you think about the reimagined design.

Chromium issue: 362672528.

HAR exports now exclude sensitive data by default

To reduce the chances of accidental leaks of sensitive information, the network log exported in HAR format will no longer contain Cookie, Set-Cookie, and Authorization headers by default.

To export logs in HAR format with the sensitive data, turn on Settings > Preferences > Network > Allow to generate HAR with sensitive data. The Network panel will mark the Export button with an arrow. Long-click the button and select Export HAR (with sensitive data) from the drop-down menu.

Before and after adding export options with and without sensitive data to HAR export.

Chromium issue: 361717594.

Elements panel improvements

This version brings an number of improvements to the Elements panel.

Autocomplete values for text-emphasis-* properties

Autocomplete in the Styles tab now suggests values for the following CSS properties:

Before and after adding autocomplete option for 'text-emphasis-*' properties.

Chromium issue: 361471205.

Scroll overflows marked with a badge

The Elements panel now marks with a new 'scroll' badge the elements that contain overflowing content and have overflow: scroll or overflow: auto, so you can easily spot scroll overflows. Like the other badges, this badge reflects the current DOM and disappears if the content stops overflowing due to, for example, a size change.

Before and after marking scroll overflows with a badge.

Chromium issue: 40670442.

Bare declarations after nested rules don't "shift up"

Following the CSS Working Group's decision to allow for bare declarations to come after nested rules, the Styles tab now doesn't "shift up" these declarations during parsing.

In the following code sample, the bare declaration after the nested rule now doesn't cause Chrome to unexpectedly reorder the styles in the cascade:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Before and after allowing for bare declarations to come after nested rules.

Chromium issue: 358119261.

Performance panel improvements

This version brings an number of improvements to the Performance panel.

Recommendations in live metrics

Live metrics can now provide metric-specific recommendations that help you configure your development environment as close as possible to what your users experience.

To get recommendations, set up field data fetching from Chrome UX Report (CrUX) and expand the Consider your local test conditions section in each metric card (if any) and Consider real user environments in the Environment settings.

Expanded sections with recommendations.

Follow the recommendations to approximate the experience of your users.

You can now navigate breadcrumbs in the timeline of a performance recording: "jump" back and forth between breadcrumbs, overwrite a child breadcrumbs, and remove multiple childs. Previously, when you selected a parent breadcrumb, its children would disappear.

Memory panel improvements

This version brings an number of improvements to the Memory panel.

New 'Detached elements' profile

The Memory panel gets a new profile type—Detached elements. It shows objects that are retained by a JavaScript reference.

Before and after adding the 'Detached elements' profile type to the Memory panel.

Chromium issue: 350519222.

Improved naming of plain JS objects

To organize and declutter the Object category in heap snapshots, plain JavaScript objects are now:

  • Named based on the properties they contain, for example, {firstProperty, secondProperty, ..., *nthProperty}.
  • Searchable by these names that are constructed by DevTools.
  • Grouped together if they have the same properties.

Before and after organizing the Object category in heap snapshots.

Chromium issue: 350519222.

Turn off dynamic theming

You can now turn off the automatic matching of DevTools colors to your custom theme colors in Chrome.

To turn off dynamic theming, clear Settings > Preferences > Appearance > Match Chrome color scheme and reload DevTools.

The before and after turning off dynamic theming.

Chromium issue: 328472696.

Chrome Experiment: Process sharing

Normally, when you open multiple tabs from the same website (like Google Docs), Chrome creates a separate renderer process for each. The Process sharing experiment changes this by allowing multiple tabs to share the same renderer process to improve performance.

If you see a message stating "This tab shares resources with other tabs..." infobar while DevTools is open, then you are part of the small group with the Process sharing experiment enabled.

The 'This tab shares resources with other tabs...' infobar.

Process sharing can affect breakpoint debugging and performance analysis. For more information, see Chrome Experiment: Process sharing.

Lighthouse 12.2.1

The Lighthouse panel now runs Lighthouse 12.2.1.

This update introduces a < 20 KB ignore threshold for resource compression suggestions to help you focus only on the meaningful file size savings. See the full list of changes.

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

Chromium issue: 772558.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Elements:
  • Console: Fixed a non-escaped ampersand in multi-line strings in cURL commands (352651673).
  • Memory: Fixed the default selection on pages with service workers, main thread now selected (40669896).
  • Security: The URL scheme highlighting now correctly updates as the security stage of an origin changes (359920086).

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.