Note: The new features are released in Chrome’s Canary and Beta channels. To get the first taste of the new features, please download the Canary or Beta versions of Chrome. All links in this article require their own ladders.

New feature 1: Added support for Trusted Type debugging

1. New breakpoint Type in Sources panel — Trusted Type Violations

Trusted Type is a W3C specification designed to prevent DOM-based XSS attacks. Chrome implements this specification in version 83. This release of Chrome has added a new Type of breakpoint in the Sources debug panel — Trust Type Violations (see figure below). When a breakpoint Type is selected en route, if a violation of the Trusted Type constraint occurs, or if the Policy implementation code defined in the Trusted Type fails, the callback will pause at the location where the exception occurs.

Further reading

[1] Trusted Types

[2] Web. Dev/trusted – typ…

2. In places that violate Trusted Type, the Sources panel now displays a warning icon that you can hover over to preview the warning and click to view the warning details.

New feature 2: Element screenshots start to include portions outside of Viewport

Element screenshots have existed for a long time, but there has always been a problem: if an element is larger than a Viewport (meaning that part of the element is displayed outside the Viewport), screenshots can’t capture anything beyond the Viewport. This time Chrome has improved this feature by allowing the screenshot feature to capture the actual content of the entire element.

New Feature 3: Trust Tokens is added to network request details

Trust Token is an API specification for preventing identity fraud and distinguishing humans from machines. In response to this new specification, Chrome Developer Tools has added a Trust Tokens tag in this release (which only appears if the request is Trust Type related) to make it easier to view specific request parameters and responses. There will be more features on Trust Tokens in future releases.

[1] Get started with Trust Tokens

New feature 4: Lighthouse has been updated to version 7

New version features:

  1. New report item: whether image used in LCP element is preloaded image
  2. If images are LCP element content, using preloading can improve LCP metrics
  3. All Issues are summed up in the Issues panel
  4. Major changes have been made to the PWA catalogue
  5. The Installable directory is completely driven by Chrome’s Installable condition

Further reading

[1] Lighthouse 7 Release Notes

New feature 5: Changes to the Element panel

1. Added the target mandatory status item in the Styles pane

: Target is a recently added CSS pseudo-class that represents the style of an element as a text fragment specified in a URL hash (Google search and Chrome already support text fragment highlighting)

2. Added element copy shortcut and shortcut keys

Right click on the Element you want to Duplicate and click on Duplicate Element to Duplicate a copy below it. Mac: Shift + Option + Down, Windows/Linux: Shift + Alt + Down

3. Color values in CSS custom properties also support color pickers

4. CSS blocks and CSS properties can be quickly copied from the shortcut menu

As shown in figure

New feature six: Cookies panel related updates

1. Cookie You can view the decoded URL value

2. The meaning of the “Clear All” button in the Cookies panel is changed to clear all filtered Cookies

3. Clears third-party cookies

Before this version, the “Clear Site Data” button on the Storage panel clears cookies of the current Site. However, third-party resources (such as images and scripts) may also be referenced on the current page. These resources also have associated cookies. In this version, there is a new option next to this button. If checked, all cookies (including those associated with third-party resources) will be cleared.

New feature 7: Support setting Client Hints request headers

New feature 8: Network panel-related updates

1. The “Record network Request” option will no longer be reworked

2. You can view WebTransport connections

WebTransport is a new specification that provides a low-latency, full-duplex client-server messaging mechanism.

The usage scenarios for WebTransport can be viewedWeb. Dev/webtranspor….

3. Rename “online” in network conditions to “No throttling”

New feature 9: Two new quick copies

1. Copy the JS object



2. Copy the file name

New feature 10: Updates to the Frame Detail panel

1. New Service Worker information view

2. The new performance. MeasureMemory () API availability information

New feature 11: Discarded frames in the Frame timeline on the Performance panel are marked in red

Hover over a red Frame to view the Frame rate

New feature 12: Emulates foldable and dual-screen devices

There’s also the enable trial feature option (container icon in the image below), which allows you to test screen-spanning media query and getWindowSegemnts() API (both will take effect if you go to chrome:// Flags).

Experimental characteristic

1. Puppeteer Recorder automation test

Go to Settings > Experiments and check the Recorder. In addition, this function is still in the experimental stage, the subsequent version will be improved. This release of the developer tools provides support for generating Puppeteer scripts, which record your interactions with your browser, to provide an automated testing tool for browsers. Taking the Dome page as an example, the steps are as follows:

  1. Go to dome page Jec.fyi /demo/record…
  2. Open the Sources panel and switch the left area to the Recording label
  3. Click Add Recording, enter the name of the script file, and click the Record button below to start Recording
  4. Try filling out the form on the page
  5. Click the Record button again to finish recording

Extension Reading [1] Puppeteer [2] DevTools Protocol [3] Puppeteer Getting Started Guide

2. Added the font property editing dialog box

Go to Settings > Experiments and check Enable new Font Editor Tools within Styles Pane

3. Added the Flex layout debugging tool

Go to Settings > Experiments and check Enable CSS Flexbox debugging features

4. New CSP Violations hashtags

Go to Settings > Experiments and check Show CSP Violations View

5. New Color Contrast Model — Advanced Perceptual Contrast Algorithm (APCA)

I call this the “Advanced Visual Contrast Algorithm.” To replace Previous Contrast, check Enable New Advanced Perceptual Algorithm (APCA) from Settings > Experiments Ratio and AA/AAA guidelines This new model will replace the original AA/AAA model. APCA is a contrast role model based on the cutting-edge theory of color perception research. Compared with AA/AAA model, APCA takes into account more environmental factors, such as spatial attributes of text (size and thickness), background and text color contrast, and ambient light.

To issue the document

1. New Chrome 88 Developer Tools features share.mubu.com/doc/1R_QN0Q… 3. Chrome update log directory mubu.com/doc/AObcWUR…

Other instructions

Reference Documents:

[1] What ‘s New In DevTools (89) Chrome developers.google.com/web/updates…

The curtain platform: share.mubu.com/doc/3vOaXg9…

Author: Xilou Listening to the Rain (wechat name T.T.)

Contact & exchange & Hire