What's new in DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova

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 check_box 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 Settings > Experiments > check_box 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 block 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.


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 Settings > Experiments.
    • The action confirmation when removing, confirming, or restoring a shortcut in settings Settings > Shortcuts.
  • The table in settings 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, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Submit a suggestion or feedback to us via crbug.com.
  • Report a DevTools issue using the More options   More   > Help > Report a DevTools issues in DevTools.
  • Tweet at @ChromeDevTools.
  • Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos.

What's new in DevTools

A list of everything that has been covered in the What's new in DevTools series.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59