What's new in DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Privacy and security panel

The old Security panel evolved into the Privacy and security panel and gets a new privacy-dedicated section. In this section, you can:

  • While DevTools is open, temporarily limit third-party cookies with or without exceptions and test how a website behaves.
  • See a table with information on third-party cookies, including whether they were blocked or exempted by the temporary limit mode, and what type of cookies may be impacted.

Before and after adding the Privacy section to the Security panel.

Chromium issue: 352364594.

Performance panel improvements

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

Calibrated CPU throttling presets

You can now automatically calibrate and get two additional CPU throttling presets that more accurately approximate low- and mid-tier mobile devices.

In Performance > CPU throttling drop-down menu, select Calibrate..., then in Settings, click Calibrate, Continue, and wait for DevTools to calculate slowdown rates for your device. You can find the calibrated throttling options back in the Performance > CPU throttling drop-down menu.

Before and after adding throttling calibration.

Select different performance events in the same AI chat

The AI assistance panel now lets you change the selected event in the performance trace in the same chat. In other words, you don't have to start a new chat to talk about a different event.

First- and third-party highlighting in Performance

The Performance panel gets a new table in the Summary tab that lets you distinguish between first-, third-party, and extension data.

Hover over entries in the table to see the relevant events highlighted in the performance trace. Check Dim 3rd parties to focus only on the first-party data.

Additionally, click icon next to a highlighted entry in the table to go to the Bottom-up tab grouped by third parties.

Field data in marker tooltips and insights

If you have field data turned on, you can now see it in metric marker tooltips and the Insights tab.

Before and after adding filed data to the marker tooltips and the Insights tab.

Chromium issue: 368135130.

'Forced reflow' insight

The Performance > Insights tab gets a new addition to the set of insights: Forced reflow. Forced reflow happens when the rendering engine pauses script execution to calculate style and layout. Forced reflows can be bottlenecks you may want to avoid.

As you hover over the new insight, it highlights the top function call with a forced reflow, its stack trace, and shows the total reflow time.

Before and after adding the 'Forced reflow' insight.

Chromium issue: 369766156.

'Optimize DOM size' insight

Another new insight is Optimize DOM size. A large DOM tree can slow down your page performance.

The insight highlights long layout reflows and style recalculations that were affected by a large DOM size in the performance trace and provides statistics on total elements, depth, and most children.

Before and after adding the 'Optimize DOM size' insight.

Extend the performance trace with console.timeStamp

The Extensibility API now supportsconsole.timeStamp. In addition to performance.measure and performance.mark, you can now create custom tracks in the performance trace and capture custom marks using console.timeStamp, as lighter alternative that doesn't add entries to the browser's internal performance timeline but only shows them in the performance trace.

For example, you can use the following syntax:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

With Capture settings > Show custom tracks, you will see your custom track in the trace:

Before and after adding console.timeStamp support.

Elements panel improvements

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

Real-time values of animated styles

The Elements > Styles tab now updates the values of animated styles in real-time.

Support for :open pseudo-class and various pseudo-elements

The Elements panel now supports the :open pseudo-class in the Styles > :hov > Force specific element state section for certain HTML elements such as <details>, <select>, <dialog>, and <input>.

Before and after adding the ':open' option.

Additionally, the Elements panel now also supports several new pseudo-elements: ::checkmark, ::picker-icon, and carousel-related ::column, ::scroll-button, ::scroll-marker, and ::scroll-marker-group.

Chromium issues: 383157184, 379805728.

Copy all console messages

You can now right-click-copy all console messages at once.

Before and after adding the 'Copy console' option.

Additionally, you can find a similar copy option in the context menu of Network > Request Payload.

Chromium issues: 40206460, 384967020.

Byte units in the Memory panel

The Memory panel now shows sizes with appropriate byte units instead of big numbers of bytes.

Before and after showing byte units.

Chromium issue: 388589515.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Performance:
    • Annotations: You can now click your label to select the corresponding entry (crbug.com/388224764).
    • Insights: Clicking CLS in the Insights tab now selects the worst cluster instead of the worst shift.
  • Ignore list: Node internals starting with node: are now ignored by default (crbug.com/382453615).
  • Live expressions: Fixed bug that caused live expression to affect the $_ command (crbug.com/388437265).
  • Elements > Styles: Relative lengths now have a popover that shows the absolute value (crbug.com/40778486).
  • Accessibility: Column headers now announce if they are sortable.
  • Tab icons are now on the right side next to tab names instead of the left.

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.