What's new in DevTools (Chrome 120)

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 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:

Install the extension in Chrome.
Open your website in a single tab for best analysis.
Open DevTools and navigate to the Privacy Sandbox panel. This panel might be hidden behind the drop-down button at the top.
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:

PSAT's How To.
To predict what is likely to happen once the deprecation comes into effect, set up an Evaluation Environment.
To identify aspects to be affected, see General Analysis Actions.
To learn how to analyze common scenarios, including analytics, e-commerce, SSO services, embedded content, and more, check out the demo examples in Analysis Scenarios.

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 > 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 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:

Open DevTools > Sources, add the hidden folder to the ignore list, and check Pause on caught exceptions.
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 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.

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 > 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.