Today, Chrome has updated its latest version, Chrome89, with faster startup and response times and significantly lower CPU usage.

For example, it offers features like forward and backward caching (20% of pages can be moved back and forth instantly), claims 25% faster startup times, 7% faster page loads, a five-fold reduction in CPU usage, an extra 1.25 hours of battery life, and optimized memory usage.

Original text: developers.google.com/web/updates…

Let’s take a look at what’s been updated.

1. Updates on Elements panel

Supports the CSS:targetpseudo-classes

You can now use DevTools to select and check: Target status.

In the Elements panel, select an element that can be toggled on the right: Target.

When the HASH and DOM element ids in the URL are the same, the element’s: Target pseudo-class is triggered. Check out the Demo to see how it works. This new DevTools feature lets you test these styles without having to manually change urls all the time.

Corresponding to Chromium Issue: 1156628

New option to copy DOM elements

Right-click on an element in the Elements palette and select Duplicate Element to quickly create a new element under it.

Alternatively, you can copy elements using keyboard shortcuts:

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

Corresponding to Chromium Issue: 1150797, 1150797

Custom COLOR pickers for CSS properties

The Styles pane in the Elements panel now displays color pickers for custom CSS properties.

Additionally, by holding down the Shift key and clicking the color picker, you can switch the RGBA, HSLA, and Hex representations of color values.

Corresponding to Chromium Issue: 1147016

New option to copy CSS properties

You can now copy CSS properties faster with new shortcuts.

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

Class copy options:

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

Property replication options:

  • Copy declaration: Copy the current row declaration;
  • Copy Property: Copies the properties of the current row;
  • Copy Value: Copies the value of the current row.

Corresponding to Chromium Issue: 1152391

2. Upgrade the Network panel

Keep a network log

DevTools now always keeps the Record Network log setting. Previously, DevTools would reset the user’s choice every time the page was reloaded.

Corresponding to Chromium Issue: 1122580

View WebTransport connections in the Network panel

The Network panel now shows the WebTransport connection.

WebTransport is a new API that provides low-latency two-way messaging between client and server.

Corresponding to Chromium Issue: 1152290

“Online” to “No throttling”

The network emulation option Online has now been renamed to No Throttling.

Corresponding to Chromium Issue: 1028078

3. New replication options in the Console, Sources, and Styles panels

New options for copying objects in the Console, Sources panels

You can now quickly copy object values using new options in the Console and Sources panels. This is handy, especially if you need to copy a large object (such as a long array).

Corresponding to Chromium Issues: 1149859, 1148353

New options for copying file names in the Sources, Styles panels

You can now copy the file name by right-clicking:

  1. File name in the Sources panel
  2. The filename of the Styles tag in the Elements panel

Select Copy File Name from the context menu to Copy the file name.

Corresponding to Chromium Issue: 1155120

Debugging support for Trusted Types

Trusted type breakpoint

You can now set breakpoints and catch exceptions for trusted type violations in the Source panel.

The Trusted Types API helps prevent DOM-based cross-site scripting attacks (XSS). Click here to learn how to use trusted types to avoid XSS attacks.

You can try it out for yourself on this demo page, in the Sources panel, by opening the debugger on the right. Expand the CSP Violation Breakpoints section and enable the Trusted Type Violations check box to suspend script running when exceptions occur.

Corresponding to Chromium Issue: 1142804

On the Issues TAB, link to the prompt box in the Sources panel

The Sources panel now displays a warning icon next to lines of code that violate Trusted Type, which previews exceptions when you hover over it. Click on it to expand the Issues TAB, which provides more details about the exception and tips on how to fix it.

Corresponding to Chromium Issue: 1150883

5. Support screenshots of elements beyond viewport

It is now possible to capture a complete screen shot of the node including the contents outside the viewport. Previously, screenshots were incomplete because they could not capture anything outside the viewport.

Screenshots of the entire browser page now get the same full screenshots.

To use the Element screenshot function, right-click on a DOM Element in the Element panel and select Capture Node Screenshot from the Shortcut menu.

Corresponding to Chromium Issue: 1003629

6. Trust Tokens TAB added to Network panel

Use the new Trust Tokens TAB to check the trusted types of network requests.

Trust Token is a new API that can help fight online fraud and distinguish bots from real people without the need for passive tracking.

Further debugging support will be available in the next version of Chrome.

Corresponding to Chromium Issue: 1126824

7. The Lighthouse panel has been upgraded to Lighthouse7

Lighthouse has now been upgraded to Lighthouse7, so click here to learn more about the changes.

Corresponding to Chromium Issue: 772558

8. Cookies related updates

New option to display cookie decoded URL

You can now view the cookie value of the URL decoded in the Cookies pane.

Go to the Application panel and select the Cookies option on the left. Select any cookies in the list. Enable the new Show URL decoded check box to view decoded cookies.

Corresponding to Chromium Issue: 997625

Only the filtered cookies are cleared

The Clear All Cookies button in the Cookies Options pane is now replaced by the Clear Filtered Cookies button.

In the Application > Cookies pane, enter text in the text box to filter Cookies. Below we use PREF to filter the list. Click the Clear Filtered Cookies button to delete visible cookies. After you clear the filtered text, you will see that other cookies remain in the list. Previously, you could only choose to clear all cookies.

Corresponding to Chromium Issue: 978059

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

When clearing site data in the Storage pane, DevTools now clears only site cookies by default. When the Including third-party cookies check box is checked, the browser will also clear third-party cookies.

Corresponding to Chromium Issue: 1012337

9. Edit User-agent Client Hints for custom devices

User-agent Client Hints can now be edited for custom devices.

Go to Settings > Devices and click Add Custom Device. Expand the User Agent Client Hints section to edit the client hints.

User-agent Client Hints are an alternative to the string form of User-Agent that allows developers to access User-Agent information in a more ergonomic manner and helps protect User privacy.

Corresponding to Chromium Issue: 1073909

10. Updated the Frames panel

Service Workers information in the Frames panel

DevTools now displays Service Workers information independently.

In the Application panel, select a Service Worker in the Service Workers option to see the details.

Corresponding to Chromium Issue: 1122507

Memory statistics are displayed in the Frames panel

New performance. MeasureMemory () API available now displays under the API the availability options.

Performance. MeasureMemory () API can statistics of the current web page of memory usage, can be used in this article to study the use of the API.

Corresponding to Chromium Issue: 1139899

11. Provide feedback in the Issues TAB

If you want to improve messages about an issue, go to the Console > Issues TAB or More Settings > More Tools > Issues TAB to open the Issues TAB. Expand an Issues message and click Is the Issue Message helpful to you? You can then provide feedback in a pop-up window.

12. Frame drop prompt on the Performance panel

When analyzing load Performance in the Performance panel, Frames now marks the dropped Frames in red. Hover over it to see the frame rate.

Corresponding to Chromium Issue: 1075865

13. Simulate dual and foldable screens in device mode

You can now simulate dual screens and foldable devices in DevTools.

After enabling device mode, select one of the Surface Duo or Samsung Galaxy Fold devices.

Click on the new SPAN icon to switch between a single or folding screen and a dual or folding screen.

After enabling the Web Platform experiment feature, you can use CSS’s screen-Spanning feature and JavaScript’s getWindowSegments API. The small Experimental icon on the right shows the switch status of Experimental Web Platform Features. If the icon is bright, it indicates that the switch has been turned on. To toggle this switch, visit Chrome in your browser ://flags.

Corresponding to Chromium Issue: 1054281

14. Experimental new features

Automate browser testing using Puppeteer Recorder

To enable this experimental new feature, check the Recorder check box under Settings > Experiments

DevTools can now generate Puppeteer scripts based on your interaction with the browser for automated browser testing. Puppeteer is a Node.js library that provides a high-level API for controlling Chrome or Chromium via the DevTools protocol.

Go to the demo page, open the Sources panel in DevTools, select the Recording TAB on the upper left, add a new record and name it (for example, test01.js).

Click the Record button at the bottom to start recording the interaction and try to fill out the form on the screen. You can see that the Puppeteer command is appended to the file accordingly. Click the Record button again to stop recording.

To run the script, follow the instructions on the Puppeteer website.

Please note that this is an early experimental feature and it may change in the future.

Corresponding to Chromium Issue: 1144127

The font editor in the Styles palette

To Enable this experimental new feature, check the Enable New Font Editor Tools within Styles Pane check box under Settings > Experiments

The new font editor in the Styles panel is a typeface attribute editing feature to help developers find better typography for web pages.

Pop-ups provide a concise user interface that dynamically manipulates fonts using a series of intuitive inputs.

Corresponding to Chromium Issue: 1093229

CSS Flexbox debugging tool

To Enable this experimental new feature, check the Enable CSS Flexbox Debugging Features check box under Settings > Experiments

Since its last release, DevTools has added support for Flexbox debugging.

DevTools now draws a guide wire to better visualize the align-items property. It also has better support for the GAP attribute. In this example, set gap: 12px; Notice the shadow pattern in the gap below.

Corresponding to Chromium Issue: 1139949

New CSP Violations hashtags

To enable this experimental new feature, check the Show CSP Violations View check box under Settings > Experiments

See all Content Security Policy (CSP) Violations in the new CSP Violations TAB. This new tag is an experimental feature designed to make it easier to handle pages with a large number of CSP and trusted type errors.

Corresponding to Chromium Issue: 1137837

New Color Contrast Algorithm – Advanced Perceptual Contrast Algorithm (APCA)

To enable the experimental new feature, Check out Enable New Advanced Perceptual Contrast Algorithm (APCA) replacing Previous Contrast Ratio under Settings > Experiments And AA/AAA GUIDELINES check box

The Advanced Sensing Contrast Algorithm (APCA) is replacing AA/AAA contrast cues in color pickers.

APCA is a new method to calculate contrast on the basis of modern color vision. APCA is more context-dependent than AA/AAA. Contrast is calculated based on the spatial properties of the text (font weight and size), color (perceived difference in brightness between the text and the background), and context (ambient light, context, the intended purpose of the text).

Corresponding to Chromium Issue: 1121900

Online posts are mostly different in depth, and even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to point out that if this article helps you, don’t forget to support oh, your praise is the biggest power OF my update! (Collection is not praise, are playing rogue 🤣) ~

Reference Documents:

  1. What’s New In DevTools (Chrome 89) | Web | Google Developers

PS: This article is included in the following blog Github – SHERlocked93/blog series of articles, welcome to pay attention to my public number front-end afternoon tea, direct search can be added or click here to add, continue to push for you front-end and front-end surrounding related quality technical articles, common progress, together with oil ~