Today, Chrome released the latest version 87, its last update of the year, which is one of the biggest performance improvements Chrome has seen in years, as well as major updates to developer tools.
Chrome’s performance has been plagued for a long time, but with the release of the new Edge, Google’s performance has suddenly improved, according to some users.
In addition, Chrome on the Mac has also been updated with ICONS, presumably designed specifically for Big Sur.
Original text: developers.google.com/web/updates…
PS: The latest Chrome update video is a Japanese female commentator, this English is really drunk…
1. New CSS Grid debugging tool
DevTools now has better support for CSS grids.
When an HTML element on a page has display: grid or display: inline-grid, you can see a grid tag next to it in the Elements panel. Click the tag to switch the highlighting of the Grid overlay on the page.
The new Layout subpanel has a Grid TAB that provides options for viewing a Grid.
See the documentation for more information.
Corresponding to Chromium Issue: 1047356
2. New WebAuthn panel
Now you can emulate the authenticator and debug the Web authentication API using the new WebAuthn TAB.
Choose More Options > More Tools > WebAuthn to open the WebAuthn panel.
Prior to the WebAuthn tag, native WebAuthn debugging was 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 much easier.
Check out our documentation for more information about the WebAuthn feature.
Corresponding to Chromium Issue: 1034663
3. The developer tools panel now supports vertical split screen
DevTools now supports moving the DevTools tool panel to the top and bottom, which allows you to view any two tool panels in a split screen at the same time.
For example, if you want to see both the Elements and Sources panels, you can right-click the Sources panel and select Move to the bottom.
Similarly, you can Move any bottom TAB to the top by right-clicking the TAB and selecting Move to Top.
4. Elements Panel functions are updated
4.1 View the Computed sidebar in the Styles subpanel
You can now toggle the Computed sidebar in the Styles panel.
By default, the Computed sidebar in the Styles panel is folded, and a button click toggles the expanded state.
Corresponding to Chromium Issue: 1073899
4.2 Grouping CSS properties in the Computed panel
You can now group CSS properties by category in the Computed sidebar.
With this new grouping feature, it is much easier to find and selectively focus on a set of related CSS properties in Computed.
On the Elements panel, select an element and click the Group check box to Group/ungroup CSS properties.
Corresponding to Chromium Issues: 1096230, 1084673, 1106251
5. Lighthouse Updated Lighthouse 6.4
The Lighthouse panel is now updated to Lighthouse 6.4, and check out Release Notes for a full list of new features.
New features in Lighthouse 6.4:
- Preload fonts: reports whether all font files that use font-display: optional are preloaded
- Valid Sourcemaps: Reports whether the non-third-party JS sourcemap file on the page is correct
- Large JavaScript Library (experimental feature) : A Large JS library on the report page (e.g. Moment.js)
Corresponding to Chromium Issue: 772558
6. Mark the Performance.mark () event in Timings on the Performance panel
The Performance.mark() event is now marked by the Timing section of the Performance panel recording.
7. Added resource-type and URL filtering criteria in the Network panel
You can now filter Network requests using the Resource-type and URL keywords in the Network panel.
For example, resource-type: image can be used to filter out network requests for images.
Click on more filters to see more uses of filters such as Resource-type and URL.
Corresponding to Chromium Issues: 1121141, 1104188
8. Updates related to the Frames subpanel in the Application panel
8.1 DisplayCOEP 和 COOPTo whom the field is reported
You can now view the cross-origin Embedder Policy (COEP) and cross-origin (COOP) reported to the terminal in the Security & Isolation section of the Frames subpanel of the Application panel Opener Policy).
The Reporting Api defines a new HTTP Header called report-to, When a violation of the CROSS-origin Embedder Policy (COEP) and cross-origin Opener Policy (COOP) occurs on a website, the browser sends a report to the address specified in the header.
Check out this article on how to turn on COEP and COOP to make your site cross-origin isolated
Corresponding to Chromium Issue: 1051466
8.2 Displaying the Report-only mode of COEP and COOP
Devtools adds markup display for report-only COEP and COOP
Watch this video to learn how to prevent information leakage and how to turn on COOP and COEP.
Corresponding to Chromium Issue: 1051466
9. Remove the Setting button from the More Tools menu
Setting in the More Tools menu is not recommended. Open Setting from the main panel.
Corresponding to Chromium Issue: 1121312
10. Experimental characteristics
All the following features need to be enabled under Settings > Experiments
10.1 View and rectify color contrast problems on the CSS Overview panel
The CSS Overview panel shows a color list of the low-color contrast text on your page.
This Demo page shows a bad example of low color contrast. Open the CSS Overview panel to see a list of all problematic elements.
Clicking on an element in the list opens Elements in the Elements panel, and DevTools provides automatic color suggestions to help fix low color contrast in text.
Corresponding to Chromium Issue: 1120316
10.2 DevTools now supports custom keyboard shortcuts
You can now customize keyboard shortcuts in DevTools.
Go to Settings > Shortcuts, hover over a command and click the Edit button to customize Shortcuts.
To reset all shortcuts, click Restore Default Shortcuts to Restore the default shortcuts.
Corresponding to Chromium Issue: 174309
If you find any errors, please leave a comment. If this article helps you, don’t forget to like it and support it
Other highly praised articles by the author:
- JS tips for increasing happiness
- Tips for using Vue
- Nginx from entry to practice, 10,000 words in detail!
- Half an hour to get the basic knowledge of CentOS
- Hand-touch Webpack multi-entry configuration practice
- Basic principles of front-end route jumping
PS: MY blog address is Github – SHERlocked93/blog, welcome to pay attention to my public account front-end afternoon tea, direct search can be added, continue to push front-end for you, as well as front-end surrounding related quality technical articles, common progress, come together ~
In addition, you can join the “front-end afternoon tea exchange group” wechat group, wechat search qianyu443033099 add my friend, remarks add group, I pull you into the group ~