What's new in DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Find the Easter egg

To celebrate this year's April Fools' Day, the DevTools team has hidden an Easter egg somewhere in DevTools.

To find it, look for a colorful 💫 emoji.

Elements panel updates

This version brings several updates to the Elements panel.

Emulate a focused page in Elements > Styles

The Elements > Styles tab now has the Emulate a focused page option under the Toggle elements state (:hov) button. Previously, you could find this option only in the Rendering panel.

If you switch focus from the page to DevTools, some overlay elements automatically hide if they are triggered by focus. For example, drop-down lists, menus, or date pickers. The Emulate a focused page option lets you debug such an element as if it is in focus.

The before and after emulating a focused page in the Styles tab.

Chromium issue: 1468393.

Color Picker, Angle Clock, and Easing Editor in var() fallbacks

To simplify CSS editing, the Elements > Styles tab now lets you use Color Picker, Angle Clock, and Easing Editor in var() fallbacks.

The before and after rendering Color Picker, Angle Clock, and Easing Editor tools in var() fallbacks.

Chromium issue: 1520417.

CSS length tool is deprecated

The CSS length authoring tool is deprecated due to feedback that it slows down workflow and doesn't add much value.

You can no longer drag to adjust the value or select a unit type from the drop-down menu. Instead, double-click the value and type a new one.

To turn the length tool back on, clear Settings > Experiments > Deprecate CSS <length> authoring tool in the Styles tab.

If you still want to use this tool, the DevTools team would like to hear your opinion and how the length tool helps you in your workflow. Feel free to leave feedback in crbug/1522657.

The deprecation experiment is turned off.

Popover for the selected search result in the Performance > Main track

To make searching easier, the flame chart in the Performance > Main track now shows you a popover on top of the corresponding event when you cycle through search results.

The before and after showing a popover over the selected search result.

Chromium issue: 1523279.

Network panel updates

This version brings a couple of updates to the Network panel.

Clear button and search filter in the Network > EventStream tab

The Network > EventStream tab gets:

  • A Clear button that clears captured events in the table.
  • A search filter that understands regular expressions.

The before and after adding a Clear button and search filter.

The DevTools team would like to thank Charles Vazac for landing this feature.

Additionally, the EventStream tab now also captures events that servers send through fetch/XHR, not only the EventSource API. Try it on this demo page.

Chromium issue: 1488863, 40659493.

Tooltips with exemption reasons for third-party cookies in Network > Cookies

The Network > Cookies tab now shows tooltips with exemption reasons next to cookies that otherwise should have been blocked by the third-party cookie phaseout.

The before and after showing a tooltip with an exemption reason for a third-party cookie.

Third-party cookies may be allowed by the following reasons:

Chromium issue: 41491846.

Enable and disable all breakpoints in Sources

The Sources > Breakpoints section brings back the Enable and Disable all breakpoints options to its drop-down menu. Previously, these options were left out by the breakpoints redesign.

To enable or disable all breakpoints, right-click a breakpoint in Sources > Breakpoints and select the corresponding option.

The before and after bringing back the enable and disable options.

Chromium issue: 1522037.

View loaded scripts in DevTools for Node.js

DevTools for Node.js now shows loaded scripts in the navigation tree in Sources > Scripts.

The before and after adding the Scripts tab with a tree of loaded scripts.

Chromium issue: 1518364.

Lighthouse 11.5.0

The Lighthouse panel now runs Lighthouse 11.5.0. See the full list of changes.

Among notable changes is a new audit that estimates root causes for layout shifts. This audit replaces the layout-shift-elements audit that only listed the elements impacted by layout shifts.

A new audit that estimates root causes for layout shifts.

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

Chromium issue: 772558.

Accessibility

This version has the following accessibility improvements:

  • Screen readers now announce:
    • The Learn more link text next to selector types in the Recorder panel.
    • When no experiments match the filter in Settings > Experiments.
    • The action confirmation when removing, confirming, or restoring a shortcut in Settings > Shortcuts.
  • The table in Settings > Locations now correctly renders as a table for accessibility tools.

Chromium issues: 1516957, 324282443, 324467508, 324930007.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Fonts in DevTools are updated to match Chrome (1523538).
  • Performance: Fixed screenshot display when hovering over the timeline (1519469).
  • Sources: The line height in the Editor is increased for better code readability (1523640).
  • Network > Responses: Fixed various display issues with different formats and encodings (1523128, 1509336, 1523128, 41481944, 1509336).

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.