Reference source: What ‘s New In DevTools (96) Chrome developer.chrome.com/en/blog/new…

Note: The new features were first released in Chrome’s Canary channel. To check out the new features mentioned in this article, download the Canary Channel version of Chrome. All links in this article require their own ladders.

New feature 1: Added the CSS Overview panel

The new CSS Overview panel is mainly used to summarize and classify the appearance and style of the page, so that we can view and deal with the appearance problems in a centralized manner.

To use: Open the panel in developer Tools and click on the “Capture Overview” button

The summary results are shown below. Click on each item to view the details of the problem

Tip: Some features of the current version

When the cursor is placed over the length value, the cursor turns into a horizontal, bidirectional arrow. Holding down and dragging the length value makes it easy to adjust it

New feature 2: Rendering panel related new items

1. Added the media query simulation item perfers-constrast

The media query item is used to query the color contrast of the operating system (not the monitor), such as high contrast (MORE) and average contrast (less), as shown in the following figure

Selecting different mock values makes it easy to debug styles in our CSS that match this media query

2. Added simulation item: Auto-dark-theme

Automatic dark themes are a feature of Chrome, not a media query; When a user’s operating system currently has a dark theme (sometimes called a dark theme), Chrome will automatically force pages that do not support dark themes (pages that do not have perfers-color-scheme: Dark media query) to a dark theme for the user who has the automatic Dark theme option (browser option) enabled. However, this transformation may not be a good presentation of your network, with this simulation, you can test your site in this case. For an article on automatic darkening, see this article

New feature 3: Style panel better supports CSS-in-JS

Following support for editing CSS-In-JS built styles directly in the Styles panel, there is a small improvement this time: support for copying CSS rules into a more csS-in-JS friendly format. Font: 14px; font: “14px” New menu items (Copy Declaration as JS and Copy All Declarations as JS) can be seen by right clicking on the property to Copy:

New feature 4: Added the Payload tag to the network panel

A separate Payload panel has been added to view request parameters that can only be viewed under the Headers TAB.

New feature 5: Properties small panel display is further improved

In the last update, the Properties widget flattened the DOM Properties (all Properties on the prototype chain are displayed together), and I commented that this was a step backwards. This time, the Properties panel will only show the current Node Properties, and the Properties on the prototype chain will be removed, as shown below:

New feature 6: Console-related updates

1. Add the option to hide CORS errors, as shown below:

2. Intl objects are more printable

Before printing the Intl object in the Console, the output information does not have the preview value of the related property, this time added:

3. Unified display of call stack information when async functions report errors

In previous versions, such information was often inconsistent, but this time it was unified

4. The sidebar will remain

In the previous release update log, I wanted to announce to the developers that we were going to remove the sidebar. After feedback, WE learned that everyone wanted to keep the sidebar, so we won’t remove it, and will continue to improve the sidebar in future releases:

To issue the document

Chrome 95 developer Tools new features

www.mubucm.com/doc/Vzxg5Od…

Chrome update log directory

Mubu.com/doc/AObcWUR…

In this paper, at the same time release and the curtain platform: www.mubucm.com/doc/UofVw7v… Gold mining platform: juejin.cn/post/702997… Author: Xilou Listening to the Rain (wechat name T.T.)