New features of chrome 95 coming soon❗ What can we learn from it❓

Preface

Why did you want to start writing this kind of article?

I want to talk about it from the general direction first:

Google has the world's largest operating system Android and the world's largest browser Chrome. Chrome, which has a market share of 67.14%, can do whatever it wants.

People always follow Google, after all, Google Chrome, which has gradually emerged in the past ten years, has become invincible among many browsers.

For front-end developers, although they are happy to see Chrome dominate the world, after all, no one can forget the fear of being dominated by IE. But monopoly is not a good thing! Because it has a high probability of bringing about technological stagnation, IE is a living example. The original intention of IE to break away from the standard and form its own API specification was to monopolize the browser market! (Everyone should be wary of monopoly!)

It is not news for Microsoft Edge to switch to Chromium kernel. Chromium kernel Edge has also been officially released. Although it has not been pushed through Windows Update, you can manually download and install it on the Edge official website.

Open source is a very effective way to achieve collusion, which can quickly create a "virtual oligarch" and even create a de facto monopoly.
Chrome, holding high the standard and open source (chromium) banner, is quietly becoming a dragon. . .

Why did you choose to start writing from this time?

Because starting from chrome95, chrome will update a version every 4 weeks.
The version is changing fast, from which we can sniff a lot of cutting-edge technology trends, and what will be eliminated in the future!

I think that after each major version update, I will summarize the important information for the first time and share it with you!

The Chrome 95 beta was released on September 23, 2021, and is expected to become a stable version in late October 2021.

New version feature sharing

New features

• EyeDropper API
  The EyeDropper API provides a straw provided by the browser to build a custom color picker. Creative applications built for the Web can benefit from the ability to sample colors from pixels on the screen.
  This can be used to pick colors anywhere on the screen~ Including the area outside the browser, what are the benefits? I don’t know if you have used figma, or not in Blue Lagoon. For web UI design applications such as these, color picking is a great Commonly used functions (including when we usually develop pages, we don’t need to borrow other tools to go to other windows to extract the color value of a certain area of the design drawing given by UI. Now this feature can be easily achieved!)
  

• self.reportError API
  This global method can be used to report an error console or global event handler, simulating an uncaught JavaScript exception.
  details

  var newError = new Error("Some error message", "someFile.js", 11);
  self.reportError(newError);
  
  window.onerror = function(message, source, lineno, colno, error) {
      console.log("message:" + error.message + ", lineno: " + lineno);
      return true;
  };
  
  self.addEventListener("error", (error) => {
      console.log(error.filename);
  });
  
  // Output
  // > "message:Some error message, lineno: 11"
  // > "someFile.js"

This function is mainly used for custom event scheduling or callback operation library. The library can use this feature to catch errors in the callback code and rethrow them to the top-level handler. This ensures that an exception in one callback will not prevent other callbacks from being processed, and that the stack trace information can still be used for top-level debugging.

• URLPattern
  As a new API, operating system support is provided for matching URLs with provided patterns.
  details and MDN

• Convenient modification of attribute values in the debug panel

  DevTools added a simpler and more flexible way to update the length in CSS!
  In the "Style" pane, look for any CSS properties that have a length (such as height, padding).
  Hover the mouse over the unit type and notice that the unit type is underlined. Click it to select a unit type from the drop-down list.

  

  cooperates with chrome 94 to support Chinese features, the console becomes more and more convenient 😀

• Improved the UI of the DevTools command menu

  It is still very useful for developers who often look for page resources in chrome (ctrl+P to call out)
  Before improvement
  

  After improvement
  

• Bold and sort custom attributes in the Console, Sources panel and Properties pane

  

  <!-- -->

  In addition to these changes, the properties in the "Properties" pane are now flattened to get a better DOM property debugging experience, especially for [Web components]

  For web component future, I have the opportunity to carry an article separately, you can check here

  

• Lighthouse is now updated to 8.4

  We all know that the three core indicators of website experience-LCP, FID, CLS
  

  Lighthouse will now detect whether the LCP element is a lazily loaded image, and suggest removing its loading attribute.

  The four factors affecting LCP are as follows:

  • Slower server response time
  • Render blocking js and css
  • Slow resource loading time
  • Client rendering

  Because a recent study on lazy loading in WordPress found that for some sites, if the image in the initial view is not lazily loaded, the LCP can be increased by 15%.

  For details, please see here

  

• latest lighthouse supports downloading

  
  By command lighthouse https://www.example.com --view
  

这里我通过百度为例子,大家替换为自己想测试的站点即可

![](https://gitee.com/wangrongding/image-house/raw/master/images/202110091628536.gif)

Deletion and deprecation

• Removed FTP support

  Chrome is withdraw support for FTP URL of . The use of FTP in the browser is low enough that it is no longer feasible to invest in improving existing FTP clients. In addition, more powerful FTP clients are available on all affected platforms.

  Google Chrome 72 and later versions cancel the support for obtaining document sub-resources through FTP and presenting top-level FTP resources. Navigating to the FTP URL currently will display a list of directories or downloads based on the resource type. A bug in Google Chrome 74 and later versions no longer supports access to FTP URLs via HTTP proxy. The proxy support for FTP has been completely removed in Google Chrome 76. In Chrome 86, FTP support for pre-release channels (Canary and Beta) was disabled, and one percent of stable users was experimentally disabled, although it can be re-enabled through the command line. In Chrome 87, it’s 50% % Of users are disabled, but it can also be enabled via the command line. Starting with Chrome 88, it can only be obtained through a deprecated trial version, and it has now been disabled.

• FTP support is now completely removed
  Since Chrome 88, it has only been offered through obsolete trials, but it has now been completely cancelled.

• supports URLs with non-IPv4 host names ending in numbers

  Most host names that are not valid IPv4 addresses but end with a number are considered valid and are looked up through DNS (for example, http://foo.127.1/ ). According to the public suffix list specification, the eTLD+1 of the host name in the URL should be 127.1 . If it is fed back into the URL, it will be mapped from the http://127.1/ http://127.0.0.1/ , which seems to be potentially dangerous. 127.0.0.0.1 may also be used to confuse users. now rejects URL with these hostnames.

• WebAssembly cross-source module sharing

  Chrome now disapprove between cross-domain environment but at the same site share WebAssembly module , to long-term effects allow agents to the cluster source .

• Deprecated U2F API (encrypted token)

  The old U2F API used by Chrome to interact with security keys has been deprecated, and the trial has been deprecated in Chrome 95. The API remains enabled by default, but the trial token will disable the keys of participating sites. The U2F security key itself has not been deprecated and will continue to be valid.

  The affected sites should be migrated to Web Authentication API . Credentials originally registered through the U2F API can be challenged through web authentication. Web Authentication API also supports USB security keys supported by U2F API.

  U2F is Chrome's original security key API. It allows sites to register public key credentials on USB security keys and challenge them to build a two-factor authentication system against phishing. U2F has never become an open web standard, but is included by the web authentication API (launched in Chrome 67). Chrome has never directly supported the FIDO U2F JavaScript API. Instead, it provides a component extension called cryptotoken, which exposes an equivalent chrome.runtime.sendMessage() method. U2F and Cryptotoken have been in maintenance mode and have encouraged sites to migrate to the web authentication API in the past two years.

Chrome history list of deleted and deprecated features

Visit ChromeStatus.com to get a currently deprecated by and previously deleted by .

finally

Beginning with chrome95, chrome will update a version every 4 weeks. For those who like early adopters, I recommend downloading the chrome beta or canary version to experience the latest features.
For some APIs that are being tested, we can also submit registration or experience qualifications through the following website

Just fill in some information and wait for the approval, which is very convenient!

The above is my sharing of the main new features of the upcoming chrome95~ I hope to help you~ 😉

I am Rongding, I am very happy to be strong here with you! Together oriented to happy programming! 😉

If you also love front-end related technology very much! Welcome to my small secret circle~ 🦄 Scan the picture below~