Earlier this month, Google released Chrome 89, which includes several important updates to the DevTools, such as improved CSP violation handling, Puppeteer recording, improved cookie debugging, as well as many additional features.
Improved CSP violation support enables developers to catch exceptions through the newly added "CSP Violation Breakpoints" section in the Sources tab. In addition, the Chrome DevTools now displays a warning icon next to lines of code that contain Trusted Type violations offering additional details about the exception and providing guidance on how to address them.
Initial support for Trust Token debugging is now available in the Network tab. Trust Tokens offer a new way for developers to distinguish between real users and bots in order to improve fraud protection. Google has promised to extend the debugging capabilities in future releases.
Working with cookies has been simplified with a few small but handy improvements. Developers now have finer control over which cookies will be cleared under Application/Cookies by filtering out cookies that should not be deleted. In addition, the Storage pane now clears only first-party cookies by default. This setting can be changed by selecting the "including third-party cookies" option. Finally, when viewing cookies, developers can now choose to see the URL-decoded values of the cookie.
Copying entire objects to the clipboard is now possible while right-clicking them in the Console, Sources panel, and Styles pane. This is especially useful when debugging large objects or arrays.
Finally, the version of Lighthouse has been upgraded with several new audit tools. You can read more about the change in Lighthouse 7 in the release notes.
The Chrome Devtools team has also shipped several new experimental features that are worth noting.
It is now possible to generate Puppeteer scripts based on browser interaction directly from the Devtools. This should offer improved reliability over 3rd party solutions that developers often used in the past.
Chrome Devtools adopted a new color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA) that replaces the existing AA/AAA guidelines for contrast ratio in the color picker.
The new APCA algorithm is more context-dependent, taking into account the text’s spatial properties, and according to Google, offering more accurate suggestions.
A full list of features that were shipped with Chrome DevTools 89 can be found in the official blog post. Developers can keep track of the latest features on the Google developers website and discuss possible features, changes, and bugs on the mailing list.
