What's new in DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Performance panel improvements

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

New performance insights

The Performance > Insights tab gets new insights:

  • Modern HTTP that highlights requests that use the old HTTP/1.1 protocol.
  • Use efficient cache lifetimes that highlights requests that could benefit from longer cache lifetimes and speed up your website's loading time.
  • Font display that shows you estimated time savings if you optimize font-display.

Three new insights in the Insights tab.

Click to highlight

You can now click items in Summary, Bottom-up, Call tree, and Event log tables to keep the corresponding events highlighted in the trace and dim the rest as you browse the performance trace.

Server timings in Summary of network requests

The Summary tab in the Performance panel now shows you server timings for network requests that implement server-side rendering technologies.

The 'Server timings' table in the Summary of a network request.

The Performance panel takes the data from the Server-Timing response header header.

Filter cookies in 'Privacy and security'

The table in the Privacy and security > Privacy > Third-party cookies section gets a filter, so you can find cookies you are interested in faster.

The filter in the 'Third-party cookies' table.

Sizes in kB units in tables across panels

To keep units the same within the same context, tables in Network and Memory panels, and 1p / 3p table in Performance > Summary now show all sizes in kB. This lets you directly compare numbers in the same column and across panels instead of keeping an eye on MB versus kB versus B units.

The before and after unifying size units.

Autocomplete supports corner-shape and corner-*-shape in Elements > Styles

Autocomplete in Elements > Styles can now suggest the corresponding values for corner-shape and corner-*-shape properties.

The autocomplete options for the 'corner-shape' property.

Chromium issue: 402346406.

Experimental: Highlighting issues with elements and attributes in DOM

With this new experimental feature, the Elements panel can now highlight issues with DOM element or attributes with a red squiggly underline. Hover over such elements or attributes to see a tooltip with a link to the corresponding error in the Issues panel.

The before and after highlighting a DOM issue in the DOM tree with a tooltip and a link to the Issues panel.

The Elements panel currently highlights invalid descendants of <select>, mismatched ARIA definitions, and invalid ARIA attributes.

Chromium issue: 378738916.

Lighthouse 12.5.0

The Lighthouse panel now runs Lighthouse 12.5.0.

Most notably in this version, legacy-javascript now uses Baseline instead of esmodules. See the full list of changes.

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

Chromium issue: 40543651.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Performance > Insights > Network dependency tree: Now shows time for all network requests in the network tree (400708304).
    • Network dependency tree: Now shows time for all network requests in the network tree (400708304).
  • Animations: Fixed a bug that caused detached elements to appear in the Memory panel because of captured animations 400635410.
  • Recorder: Now uses the same confirmation dialog as pasting code when running recording for the first time.
  • Layers: Now shows the total number of layers and the total memory for all visible layers in the status bar at the bottom.
  • Memory: Heap snapshot initialization has been boosted by parallelizing tasks between two workers instead of using one (42203857).
  • Issues: Now reports Local Network Access (LNA) CORS errors (395895368).
  • Accessibility:
    • Tooltips: Now appear on hotkey press instead of focus (396311936).
    • Elements > Styles: The var() function can now be interacted with keyboard, meaning you can select --custom-property and press Enter to go to its link target (401212692).

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.