What's new in DevTools, Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

Performance panel improvements

This version brings several improvements to the Performance panel.

Preconnected origins in 'Network dependency tree' insight

The Performance > Insights > Network dependency tree insight now shows you a list of used or unused preconnected origins and preconnect candidates, if any.

Preconnect hints let your site establish early connections to important third-party origins and improve page load speed.

The before and after adding preconnected origins and canditates to 'Network dependency tree' insight.

For more information, see Preconnect to required origins.

Server response and redirection times in 'Document request latency' insight

The Performance > Insights > Document request latency insight now shows you server response time and, if any, the number or redirects and redirection time.

The before and after adding redirection and server response times to the 'Document request latency' insight.

Redirects in Summary of network requests

The Performance panel now shows redirect URLs in the Summary of network requests and in their tooltips.

The before and after adding redirect URLs to Summary and tooltips of network requests.

Chromium issue: 402353313.

Reduced noise in the performance trace

The Performance panel now won't show events from the compile category of the v8 JavaScript engine. Previously, these events caused a lot of unnecessary overhead and noise, the compile code event in particular.

The before and after removing the 'compile code' events from the performance trace.

If you notice that some events important to you are now missing, feel free to leave your feedback in crbug.com/414330508.

Deprecated 'Disable JavaScript samples'

The Disable JavaScript samples option in Performace > Captures settings has been deprecated and removed due to rare usefulness and low usage.

The before and after removing the 'Disable JavaScript samples' option from 'Capture settings'.

Chromium issue: 414734883.

Geolocation accuracy parameter in Sensors

The Sensors panel now lets you set accuracy in geolocation emulation. This way, you can test the handling of different levels of GPS accuracy.

The before and after adding the 'Accuracy' parameter to geolocation emulation in the Sensors panel.

Chromium issue: 40074843.

Elements panel improvements

This version brings several improvements to the Elements panel.

Debug complex CSS values easier

To help you debug complex CSS values, the Elements > Styles tab now shows you in a tooltip on hover:

  • The full definition chain of CSS variables, so that you don't need to click through multiple links.
  • A step-by-step evaluation of complex CSS calculations, so you can identify bugs more efficiently and gain a deeper understanding of how a value is computed.

The tooltip shows definition chains in multiple lines, one for each definition, and you can expand complex calculations and hover over values to highlight and trace the computed value back to its initial expression.

The before and after adding a tooltip with definition chains and expandable complex calculations.

Chromium issue: 396080529.

@function support in Elements > Styles

In preparation for @function support in Chrome, the Elements > Styles tab now links your custom function names to their definitions in a dedicated section.

The before and after linking your custom function name to the corresponding section.

Network panel improvements

This version brings several improvements to the Network panel.

has-request-header filter

The Network panel now supports the has-request-header filter that lets you filter by a specific request header name.

The before and after adding the 'has-request-header' filter to the Network panel.

Chromium issue: 397481040.

Direct Sockets in Isolated Web Apps

In the Network panel, you can now monitor the traffic of Isolated Web Apps (IWAs) through TCPSocket, UDPSocket (in bound mode), UDPSocket (in connected mode).

To do this, select a directscoket connection next to regular requests in the table and, in the Messages tab, select a message.

The before and after adding support of Direct Sockets in IWAs to the Network panel.

Isolated Web Apps (IWAs) provide a high-trust security model for web applications. For more information, see Getting started with Isolated Web Apps and check out the demo app that implements the Direct Sockets API.

Miscellaneous highlights

These are some noteworthy fixes and improvements 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, 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.