Chrome 77

Google Chrome goes 77

Chrome 77 is out with new features like;

Copy element’s styles

Right-click a node in the DOM Tree to copy that DOM node’s CSS to your clipboard.

Contentful Paint

Understanding and measuring the real world performance of your site can be hard. Metrics like load, or DOMContentLoaded, don’t tell you what the user is seeing on screen. First Paint, and First Contentful Paint, only capture the beginning of the experience. First Meaningful Paint is better, but it’s complex, and sometimes wrong.

The Largest Contentful Paint API, available starting in Chrome 77, reports the render time of the largest content element visible in the viewport and makes it possible to measure when the main content of the page is loaded.

To measure the Largest Contentful Paint, you’ll need to use a Performance Observer, and look for largest-contentful-paint events.

let lcp;const po = new PerformanceObserver((eList) => {  const e = eList.getEntries();  const last = e[e.length - 1];  lcp = last.renderTime || last.loadTime;});const poOpts = {  type: 'largest-contentful-paint',  buffered: true}po.observe(poOpts);

Form Capabilities

Many developers build custom form controls, either to customize the look and feel of existing elements, or to build new controls that aren’t built in to the browser. Typically this involves using JavaScript and hidden <input> elements, but it’s not a perfect solution.

Two new web features, added in Chrome 77, make it easier to build custom form controls, and remove the many of the existing limitations.

The formdata event

The formdata event is a low-level API that lets any JavaScript code participate in a form submission. To use it, add a formdata event listener to the form you want to interact with.

const form = document.querySelector('form');form.addEventListener('formdata', ({formData}) => {  formData.append('my-input', myInputValue);});

When the user clicks the submit button, the form fires the formdata event, which includes a FormData object that holds all of the data being submitted. Then, in your formdata event handler, you can update or modify the formdata before it’s submitted.

Form-associated custom elements

Form-associated custom elements help to bridge the gap between custom elements and native controls. Adding a static formAssociated property tells the browser to treat the custom element like all other form elements. You should also add common properties found on input elements, like namevalue, and validity to ensure consistency with native controls.

class MyCounter extends HTMLElement {
  static formAssociated = true;

  constructor() {
    super();
    this._internals = this.attachInternals();
    this._value = 0;
  }
  ...
}

Native Lazy Loading

Lazy loading is a technique that allows you to defer the loading of non-critical resources, like off-screen <img>‘s, or <iframe>‘s – until they’re needed, increasing the performance of your page.

Starting in Chrome 76, the browser handles lazy loading for you, without the need to write custom lazy loading code, or use a separate JavaScript library.

To tell the browser you want an image, or iframe lazy loaded, use the loading=”lazy” attribute. Images and iframes that are “above the fold” load normally. And those that are below, are only fetched when the user scrolls near them.

<img src="image.jpg" loading="lazy" width="400" height="250" alt="...">
Lazy Loading feature in Chrome 77

Lighthouse 5.1 in the Audits panel

The Audits panel is now running Lighthouse 5.1. New audits include:

  • Provides a valid apple-touch-icon. Checks that a PWA can be added to an iOS homescreen.
  • Reports the total number of network requests and file sizes for various categories, such as documents, scripts, stylesheets, images, and so on.
  • Measures the maximum potential time between a user’s first page interaction and the browser’s response to that interaction. Note that this metric replaces the Estimated Input Latency metric. Maximum Potential First Input Delay does not factor into your Performance category score.

Chrome 77 comes with new features up its sleeves for both developers and web users.

What’s New In DevTools (Chrome 77)

More Information