What's new in DevTools (Chrome 120)

Sofia Emelianova
Sofia Emelianova

Third-party cookie phaseout

Your site may use third-party cookies and it's time to take action as we approach their deprecation. To learn what to do about affected cookies, see Preparing for the end of third-party cookies.

The Checkbox. Include third-party cookie issues checkbox has been enabled by default for all Chrome users, so the Issues tab now warns you about the cookies that will be affected by the upcoming deprecation and phaseout of third-party cookies. You can clear the checkbox at any time to stop seeing these issues.

A warning about the upcoming third-party cookie deprecation in the Issues tab.

Chromium issue: 1466310.

Analyze your website's cookies with the Privacy Sandbox Analysis Tool

The Privacy Sandbox Analysis Tool extension for DevTools is under active development with the latest pre-release version of 0.3.2. The tool lets you understand how your website uses cookies and provides guidance on the new privacy-preserving Chrome APIs.

To analyze your cookies:

  1. Install the extension in Chrome.
  2. Open your website in a single tab for best analysis.
  3. Open DevTools and navigate to the Privacy Sandbox panel. This panel might be hidden behind the More tabs. drop-down button at the top.
  4. Open the Cookies section and click Analyze this tab. If the tool didn't find any cookies, try reloading the page.

The Privacy Sandbox Analysis Tool.

For more information on how to use the Privacy Sandbox Analysis Tool (PSAT), see the following:

Moreover, see guidance on Reporting issues.

Enhanced ignore listing

Default exclusion pattern for node_modules

This version enables the default regular expression as a custom exclusion rule in Settings. Settings > Ignore List. To help you focus on only your code, the Debugger will now skip scripts from /node_modules/ and /bower_components/ by default. You can disable this rule in settings at any time.

The before and after adding a regular expression.

Chromium issue: 1496301.

Exceptions now stop execution if caught or passing through non-ignored code

When you debug code with Checkbox. Pause on caught exceptions checked, the Debugger now stops the execution on the following caught exceptions, both synchronous and asynchronous:

  • Exceptions caught in non-ignored frames in the call stack.
  • Caught exceptions that pass through non-ignored frames in the call stack. For example, see the screenshot.

Pause on a caught exception that passed through non-ignored code.

To test this behavior, open this demo page:

  1. Open DevTools > Sources, add the hidden folder to the ignore list, and check Checkbox. Pause on caught exceptions.
  2. On the page, under the "Caught" list of scenarios, click the different buttons and see the execution paused in the mentioned cases.

To pause execution on caught and/or uncaught exceptions (when checked) in asynchronous calls, the Debugger looks for rejection handlers across promises. Starting with this version, the Debugger no longer predicts that Promise.finally() will catch an exception, similar to how the try...finally block doesn't catch any.

Chromium issues: 1489312, 1291064.

x_google_ignoreList renamed to ignoreList in source maps

The source maps specification has adopted the ignoreList field instead of x_google_ignoreList and DevTools now supports the new name with a fallback for the old one. Frameworks and bundlers can now use the new field name.

Source maps let you debug the code you wrote rather than minified code served by your website.

For more information on source maps, see:

New input mode toggle during remote debugging

You can now toggle between touch and mouse input when debugging a Chrome tab remotely. For example, when you run a Chrome instance with the --remote-debugging-port=<port> and connect to this network target via chrome://inspect/#devices.

Watch the video to see input mode toggling in action.

Chromium issue: 1410433.

The Elements panel now shows URLs for #document nodes

To let you debug iframes easier, the Elements panel now displays documentURL next to #document nodes.

The before and after shows documentURL next to #document node.

Chromium issue: 1376976.

Effective Content Security Policy in the Application panel

You can now view the Content Security Policy (CSP) details of an inspected frame. To view the details, navigate to Application > Frames, select a frame and scroll down to the Content Security Policy (CSP) section.

The Content Security Policy section located in the Application tab.

Chromium issue: 1424714.

Improved animation debugging

In the Animations tab, you can now:

  • Click anywhere on the timeline header to set the playhead. The animation continues to play if it was already playing and stops otherwise. Previously, you had to drag it.
  • Resize the name column to see the full animation names.

Chromium issues: 1492460, 1489721.

'Do you trust this code?' dialog in Sources and self-XSS warning in Console

The Checkbox. Show warning about Self-XSS when pasting code experiment has been enabled by default. Self-XSS (self cross-site scripting) is an attack that tricks you into pasting malicious code into DevTools and lets an attacker gain control of your web accounts and personal information.

If you are a new DevTools user and you attempt to paste code, the Sources panel now shows you the Do you trust this code? dialog and the Console now displays a similar warning. Paste only the code that you understand and have reviewed yourself. To paste, type allow pasting when prompted. Once pasting has been allowed once, the warning will never be shown again.

The 'Do you trust this code?' dialog when pasting code to Sources.

Chromium issue: 345205.

Event listener breakpoints in web workers and worklets

When you set an event breakpoint in Sources > Event Listener Breakpoints, in addition to pausing on this event on your website, the Debugger now also pauses when the corresponding event happens in a web worker or worklet of any type, including the Shared Storage Worklet.

Debugger paused when a service worker calls the set timeout function.

Chromium issue: 1445175.

The new media badge for <audio> and <video>

You can now enable the new media badge for <audio> and <video> elements in the Elements panel. When you click the badge, it takes you to the Media panel, so you can debug these elements.

The new media badge for audio and video tags enabled.

This feature is under development and will be further improved. The DevTools team would like to express gratitude to Junseo (Jeremy) Yoo for landing this improvement.

Chromium issue: 1448214.

Preloading renamed to Speculative loading

To avoid overusing the previous term and better reflect the behavior, Application > Preloading has been renamed into Speculative loads. Speculative loading allows a near-instant page load based on speculation rules that you can define for your website to prerender and prefetch most navigated-to pages.

The before and after renaming preloading into speculative loading.

Chromium issue: 1478888.

Lighthouse 11.2.0

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

This update includes an overhaul to the performance category. Performance insights are now scored and prioritized based on their estimated impact to the performance metrics. Additionally, the performance score gauge includes more detailed information about how each metric affects the score.

The before and after performance overhaul.

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

Chromium issues: 772558.

Accessibility improvements

This version has the following accessibility improvements:

  • Screen readers will now announce the status (checked or unchecked) of checkboxes under Sources > Breakpoints.
  • You can now access the Hide issues like this drop-down menu with the keyboard.

Chromium issues: 1488645, 1484918.

Miscellaneous highlights

These are some noteworthy fixes and improvements in this release:

  • Performance: Fixed the sometimes missing LCP indicator in the recording (1487136).
  • Speculative loads: Fixed the full URLs for targets in the drop-down menu in the Network panel (1471020).
  • Coverage:
    • Fixed line-by-line coverage for pretty-printed code (1464974).
    • The coverage information now updated on page reload (1494457).
  • Console:
    • Fixed partial text selection in messages (1487449).
    • Fixed the flickering of autocomplete drop-down (1487453).
    • Supported parentheses in stack paths and URLs in stack traces (1473926).
  • Sources: Supported the syntax highlighting of the TypeScript using keyword (1490515).
  • Quick Open menu now shows private methods (1492957).
  • Application > Background services: The top action bar now wraps text when resizing (1487276).
  • Elements > Styles:
    • Fixed the resolution of the inherited CSS variables for slotted elements (1492162).
    • When disabling a CSS property, its comments are now stripped to fix syntax breaks (1101224).
  • Network: The Priority column now shows a tooltip with information on initial priority (the same is shown when Big request rows is checked) (1495735).
  • Deprecations:
    • The Color format setting has been disabled in previous versions and is now removed.
    • The Delete all overrides option in Sources is now removed due to low usage after the streamlining of overrides (1473681).

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