Chrome performance has been greatly improved! (Interpretation of new features of Chrome 87)

Today Chrome was updated to the latest version 87. This is the last Chrome update this year. This version is the biggest improvement in Chrome performance in many years, and the developer tools have also been significantly updated.

Some users believe that Chrome’s performance issues have been criticized for a long time. However, after the new Edge came out, the performance suddenly improved. This is obviously due to Google’s impact on Edge’s market share. increased pressure.

In addition, Chrome on Mac has also updated its icon, which should be designed specifically to adapt to Big Sur.

Original text: https://developers.google.com/web/updates/2020/10/devtools

PS: The latest Chrome update video is narrated by a Japanese woman , this spoken English is really intoxicating...

1. New CSS Grid debugging tool

Now DevTools has better support for CSS Grid support.

CSS grid debugging

When the HTML element on the page has display: grid or display: inline-grid, you can see a Grid tag next to it in the Elements panel. Click the marker to toggle the highlighting of the Grid overlay on the page.

The new Layout subpanel has a Grid tab that provides some options for viewing the Grid.

View the documentation for more information.

Corresponds to Chromium issue: 1047356

2. New WebAuthn panel

It is now possible to simulate the authenticator and debug using the new WebAuthn tab Web Authentication API.

WebAuthn

Select More options > More tools > WebAuthn as shown to open the WebAuthn panel.

WebAuthn tab

Until the WebAuthn tab appears, native WebAuthn debugging is not supported on Chrome. Developers need physical authenticators to test their web applications.

With the new WebAuthn tag, web developers can now simulate authenticators, customize their functionality, and check their status without the need for any physical authenticators. This makes the debugging experience easier.

View our documentation to learn more about the WebAuthn feature.

Corresponds to Chromium issue: 1034663

3. The developer tools panel now supports vertical split screen

DevTools now supports moving the DevTools tool panel to Top and bottom, this way any two tool panels can be viewed in split screen at the same time.

For example, if you want to view both the Elements and Sources panels, you can right-click the Sources panel and select Move to Bottom.

Move to bottom

Similarly, any bottom tab can be moved to the top by right-clicking the tab and selecting Move to top.

Move to top

4. Elements panel function update

4.1 In the Styles sub-panel View the Computed sidebar in

You can now toggle the Computed sidebar in the Styles panel.

By default, the Computed sidebar in the Styles panel is collapsed, and you can click the button to switch to the expanded state.

Computed sidebar pane

Corresponds to Chromium issue: 1073899

4.2 Grouping CSS properties in the Computed panel

CSS properties can now be grouped by category in the Computed sidebar.

With this new grouping feature, it’s even easier to find and selectively focus on a group of related CSS properties in Computed.

On the Elements panel, select an element and click the Group checkbox to group/ungroup CSS properties.

Grouping CSS properties

Corresponds to Chromium issues: 1096230, 1084673, 1106251

5. Lighthouse updates Lighthouse 6.4

Lighthouse panel is now updated to Lighthouse 6.4, check the release notes to see the complete list of new features.

Lighthouse

New features in Lighthouse 6.4:

1. Preload fonts: Report whether all font files using font-display: optional are preloaded Into

2. Valid sourcemaps: Report whether the sourcemap files for non-third-party JS on the page are correct

3. Large JavaScript library (Experimental feature): Report The large JS library on the page (for example: moment.js)

corresponds to Chromium issue: 772558

6. In the Event Line (Timings) in the Performance panel, go to Marking performance.mark() events

The Timing section of the Performance panel record now marks Performance.mark() events.

Performance.mark events

7. Network panel adds new resource-type and url filter conditions

Network requests can now be filtered using the resource-type and url keywords in the Network panel.

For example, use resource-type: image to filter out network requests for images.

resource-type filter

Click on more filter conditions to see more similar to resource-type and # Filter usage of ##url.

Corresponds to Chromium issues: 1121141, 1104188

8. Updates related to the Frames sub-panel in the Application panel

8.1 Support display## The reporting-to fields for #COEP and COOP

COEP reported to the endpoint can now be viewed in the Security & Isolation section of the Frames subpanel of the Application panel

(Cross-Origin Embedder Policy) and COOP (Cross-Origin Opener Policy). Reporting Api defines a new HTTP Header called Report-To. When there is a violation of

COEP

(Cross-Origin Embedder Policy) and COOP (Cross -Origin Opener Policy), the browser will send the report to the address specified in this header.

reporting to endpoint

About how to enable

COEP

and COOP to make your website cross-origin For cross-origin isolated, you can view this articleCorresponding to Chromium issue: 1051466

8.2 Displaying the report-only mode of COEP and COOP

Devtools For the case where COEP and COOP are report-only, a new label display is added

report-only label

Watch this video to learn how to prevent Information leakage, and how to enable COOP and COEP.

Corresponds to Chromium issue: 1051466

9. Remove the Setting button in the More tools menu

Setting in the More tools menu is no longer recommended. , please open Setting from the main panel.

Settings in the main panel

Corresponds to Chromium issue: 1121312

10. Experimental features

The following features all need to enable the relevant options under Settings > Experiments

10.1 The CSS Overview panel supports viewing and repairing color contrast issues

CSS Overview panel display A list of colors for low-contrast text on your page.

This Demo page shows a negative case of low color contrast. Open this CSS Overview panel to view a list of all problematic elements.

Low color contrast issues

Click an element in the list to open the element in the Elements panel, and DevTools will provide automatic color suggestions to help fix it Low color contrast issue with text.

Corresponds to Chromium issue: 1120316

10.2 DevTools supports custom keyboard shortcuts

You can now customize keyboard shortcuts in DevTools.

Go to Settings > Shortcuts, hover the mouse over a command, and click the Edit button to customize the shortcut keys.

Customize keyboard shortcuts

To reset all shortcuts, click Restore default shortcuts to restore the default shortcuts.

corresponds to Chromium issue: 174309