What's New In DevTools (Chrome 89)

<<../../_shared/devtools-research.md>>

Debugging support for Trusted Types violations

Breakpoint on Trusted Type violations

You can now set breakpoints and catch exceptions on Trusted Type Violations in the Sources panel.

Trusted Types API helps you prevent DOM-based cross-site scripting vulnerabilities. Learn how to write, review and maintain applications free of DOM XSS vulnerabilities with Trusted Types here.

In the Sources panel, open the debugger sidebar pane. Expand the CSP Violation Breakpoints section and enable the Trusted Type violations checkbox to pause on the exceptions. Try it yourself with this demo page.

Chromium issue: 1142804

Link issue in the Sources panel to the Issues tab

The Sources panel now shows a warning icon next to the line that violates Trusted Type. Hover on it to preview the exception. Click on it to expand the Issues tab, it provides more details on the exceptions and guidance on how to fix it.

Chromium issue: 1150883

Capture node screenshot beyond viewport

You can now capture node screenshots for a full node, including content below the fold. Previously, the screenshot was cut off for content not visible in the viewport. The full-page screenshots are precise now as well.

In the Elements panel, right click on an element and select Capture node screenshot.

Chromium issue: 1003629

New Trust Tokens tab for network requests

Inspect the Trust Token network requests with the new Trust Tokens tab.

Trust Token is a new API to help combat fraud and distinguish bots from real humans, without passive tracking. Learn how to get started with Trust Tokens.

Further debugging support will come in the next releases.

Chromium issue: 1126824

Lighthouse 7 in the Lighthouse panel

The Lighthouse panel is now running Lighthouse 7. Check out the release notes for a full list of changes.

New audits in Lighthouse 7:

• Preload Largest Contentful Paint (LCP) image. Audits if the image used by the LCP element is preloaded in order to improve your LCP time.
• Issues logged to the Issues panel. Indicates a list of unresolved issues in the Issues panel.
• Progressive Web Apps (PWA). The PWA Category changed fairly significantly.

• The Installable group is now powered entirely by the capability checks that enable Chrome's installable criteria. These are the same signals seen in the Manifest pane.

  • The "Registers a service worker…" audit moves to the PWA Optimized group, and the "Uses HTTPS" audit is now included as part of the key "installability requirements" audit.
  • The Fast and reliable group is removed. As the revamped "installability requirements" audit includes offline-capability checking, the “current page and start_url respond with 200 when offline” audit was removed. The "Page load is fast enough on mobile network" audit was removed too.

Chromium issue: 772558

Elements panel updates

Support forcing the CSS :target state

You can now use DevTools to force and inspect the CSS :target state.

In the Elements panel, select an element and toggle the element state. Enable the :target checkbox to force and inspect the styles.

Use the :target pseudo-class to style element when the hash in the URL and the id of an element are the same. Check out this demo to try it yourself. This new DevTools feature lets you test such styles without having to manually change the URL all the time.

Chromium issue: 1156628

New shortcut to duplicate element

Use the new Duplicate element shortcut to clone an element instantly.

Right click an element in the Elements panel, select Duplicate element. A new element will be created under it.

Alternatively, you can duplicate element with keyboard shortcuts:

• Mac: Shift + Option + ⬇️
• Window/ Linux: Shift + Alt + ⬇️

Chromium issues: 1150797, 1150797

Color pickers for custom CSS properties

The Styles pane now shows color pickers for custom CSS properties.

In addition, you can hold the Shift key and click on color picker to cycle through the RGBA, HSLA, and Hex representations of the color value.

Chromium issue: 1147016

New shortcuts to copy CSS properties

You can now copy CSS properties quicker with a few new shortcuts.

In the Elements panel, select an element. Then, right-click on a CSS class or a CSS property in the Styles pane to copy the value.

Copy options for CSS class:

• Copy selector. Copy the current selector name.
• Copy rule. Copy the rule of the current selector.
• Copy all declarations: Copy all declarations under the current rule, including invalid and prefixed properties.

Copy options for CSS property:

• Copy declaration. Copy the declaration of the current line.
• Copy property. Copy the property of the current line.
• Copy value: Copy the value of the current line.

Chromium issue: 1152391

Cookies updates

New option to show URL-decoded cookies

You can now opt to view the URL-decoded cookies value in the Cookies pane.

Go to the Application panel and select the Cookies pane. Select any cookie on the list. Enable the new Show URL decoded checkbox to view the decoded cookie.

Chromium issue: 997625

Clear only visible cookies

The Clear all cookies button in the Cookies pane is now replaced by Clear filtered cookies button.

In the Application panel > Cookies pane, enter text in the textbox to filter the cookies. In our example here, we filter the list by “PREF”. Click on the Clear filtered cookies button to delete the visible cookies. Clear the filter text and you will see the other cookies remain in the list. Previously, you only had the option to clear all cookies.

Chromium issue: 978059

New option to clear third-party cookies in the Storage pane

When clearing the site data in the Storage pane, DevTools now clear only first-party cookies by default. Enable the including third-party cookies to clear the third-party cookies as well.

Chromium issue: 1012337

Edit User-Agent Client Hints for custom devices

You can now edit User-Agent Client Hints for custom devices.

Go to Settings > Devices and click on Add custom device.... Expand the User agent client hints section to edit the client hints.

User-Agent Client Hints are an alternative to User-Agent string that enables developers to access information about a user's browser in a privacy-preserving and ergonomic way. Learn more about User-Agent Client Hints in web.dev/user-agent-client-hints/.

Chromium issue: 1073909

Network panel updates

Persist “record network log” setting

DevTools now persist the “Record network log” setting. Previously, DevTools reset the user’s choice whenever a page reloads.

Chromium issue: 1122580

View WebTransport connections in the Network panel

Network panel now displays WebTransport connections.

WebTransport is a new API offering low-latency, bidirectional, client-server messaging. Learn more about its use cases, and how to give feedback about the future of the implementation in web.dev/webtransport/.

Chromium issue: 1152290

“Online” renamed to “No throttling”

The network emulation option “Online” is now renamed to “No Throttling”.

Chromium issue: 1028078

New copy options in the Console and Sources panel

New shortcuts to copy object in the Console and Sources panel

You can now copy object values with the new shortcuts in the Console and Sources panel. This is handy especially when you have a large object (e.g. a long array) to copy.

Chromium issues: 1149859, 1148353

New shortcuts to copy file name in the Sources panel

You can now copy file name by right clicking on a file in the Sources panel and select Copy file name.

Chromium issue: 1155120

Frame details view updates

New Service Workers information in the Frame details view

DevTools now displays dedicated service workers under the frame which creates them.

In the Application panel, expand a frame with service workers, then select a service worker under the Service Workers tree to view the details.

Chromium issue: 1122507

Measure Memory information in the Frame details view

The performance.measureMemory() API status is now displayed under the API availability section.

The new performance.measureMemory() API estimates the memory usage of the entire web page. Learn how to monitor your web page's total memory usage with this new API in this article.

Chromium issue: 1139899

Provide feedback from the Issues tab

If you ever want to improve an issue message, go to the Issues tab from the Console or More Settings > More tools > Issues > to open the Issues tab. Expand an issue message, and click on the Is the issue message helpful to you?, then you can provide feedback in the pop up.

Dropped frames in the Performance panel

When analyzing load performance in the Performance panel, the Frames section now marks dropped frames as red. Hover on it to find out the frame rate.

Chromium issue: 1075865

Emulate foldable and dual-screen in Device Mode

You can now emulate dual-screen and foldable devices in DevTools.

After enabling the Device Toolbar, select one of these devices: Surface Duo or Samsung Galaxy Fold.

Click on the new span icon to toggle between single-screen or folded and dual-screen or unfolded postures.

You can also enable the Experimental Web Platform features to access the new CSS media screen-spanning feature and JavaScript getWindowSegments API. The experimental icon displays the state of the Experimental Web Platform features flag. The icon is highlighted when the flag is turned on. Navigate to chrome://flags and toggle the flag.

Chromium issue: 1054281

Experimental features

Automate browser testing with Puppeteer Recorder

DevTools can now generate Puppeteer scripts based on your interaction with the browser, making it easier for you to automate browser testing. Puppeteer is a Node.js library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

Go to this demo page. Open the Sources panel in DevTools. Select the Recording tab on the left pane. Add a new recording and name the file (e.g. test01.js).

Click on the Record button at the bottom to start recording the interaction. Try to fill in the on-screen form. Observe that Puppeteer commands are appended to the file accordingly. Click on the Record button again to stop the recording.

To run the script, follow the Getting started guide in Puppeteer official site.

Please note that this is an early-stage experiment. We plan to improve and expand the Recorder functionality over time.

Chromium issue: 1144127

Font editor in the Styles pane

The new Font Editor is a popover editor in the Styles pane for font related properties to help you find the perfect typography for your webpage.

The popover provides a clean UI to dynamically manipulate typography with a series of intuitive input types.

Chromium issue: 1093229

CSS flexbox debugging tools

DevTools added experimental support for flexbox debugging since last release.

DevTools now draws a guiding line to help you better visualize the CSS align-items property. The CSS gap property is supported as well. In our example here, we have CSS gap: 12px;. Notice the hatching pattern for each gap.

Chromium issue: 1139949

New CSP Violations tab

View all Content Security Policy (CSP) violations at a glance in the new CSP Violations tab. This new tab is an experiment that should make it easier to work with web pages with a large amount of CSP and Trusted Type violations.

Chromium issue: 1137837

New color contrast calculation - Advanced Perceptual Contrast Algorithm (APCA)

The Advanced Perceptual Contrast Algorithm (APCA) is replacing the AA/AAA guidelines contrast ratio in the Color Picker.

APCA is a new way to compute contrast based on modern research on color perception. Compared to AA/AAA guidelines, APCA is more context-dependent. The contrast is calculated based on the text’s spatial properties (font weight & size), color (perceived lightness difference between text and background), and context (ambient light, surroundings, intended purpose of the text).

Chromium issue: 1121900

<<../../_shared/devtools-feedback.md>>

<<../../_shared/canary.md>>

<<../../_shared/discover.md>>