Google Chrome What's New - 60+

[rogerxu]

Google Chrome version history - Wikipedia

[rogerxu]

Chrome 60

[rogerxu]

Chrome 61

[rogerxu]

Chrome 62

New in Chrome 62  |  Web  |  Google Developers What's New In DevTools (Chrome 62)  |  Web  |  Google Developers

Network Quality Indicator

navigator.connection.effectiveType
> 3g

OpenType Variable Fonts

.heading {
  font-family: "Avenir Next Variable";
  font-size: 48px;
  font-variation-settings: 'wght' 700, 'wdth' 75;
}
.content {
  font-family: "Avenir Next Variable";
  font-size: 24px;
  font-variation-settings: 'wght' 400;
}

Media capture from DOM elements

Not Secure labels for some HTTP pages

top-level await in the Console

Screenshots of a portion of the viewport

1. Inspect
2. Hold Ctrl and select the region of the viewport.
3. Release the mouse.

CSS Grid highlighting

New Console filters

Negative filters

-<text> to filter out any message that includes <text>.

URL filters

url:<text>

[rogerxu]

Chrome 63

New in Chrome 63  |  Web  |  Google Developers What's New In DevTools (Chrome 63)  |  Web  |  Google Developers

Dynamic Module Imports

button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  });
});

Async Iterators and Generators

async function* getChunkSizes(url) {
  const response = await fetch(url);
  const b = response.body;
  for await (const chunk of magic(b)) {
    yield chunk.length;
  }
}

CSS Over-scroll behavior

.messages {
  overscroll-behavior: contain;
}

Promise.prototype.finally

Promise.prototype.finally  |  Web  |  Google Developers

const fetchAndDisplay = ({ url, element }) => {
  showLoadingSpinner();
  fetch(url)
    .then((response) => response.text())
    .then((text) => {
      element.textContent = text;
    })
    .catch((error) => {
      element.textContent = error.message;
    })
    .finally(() => {
      hideLoadingSpinner();
    });
};

Using async/await

const fetchAndDisplay = async ({ url, element }) => {
  showLoadingSpinner();
  try {
    const response = await fetch(url);
    const text = await response.text();
    element.textContent = text;
  } catch (error) {
    element.textContent = error.message;
  } finally {
    hideLoadingSpinner();
  }
};

Plural Rules

const pr = new Intl.PluralRules('en-US');
pr.select(0); // 0 puppies
pr.select(1); // 0 puppy
pr.select(2); // 2 puppies

Multi-client remote debugging support

Workspaces 2.0

[rogerxu]

Chrome 64

New in Chrome 64  |  Web  |  Google Developers

What's New In DevTools (Chrome 64)  |  Web  |  Google Developers

ResizeObserver

It is like document.onresize for elements.

Improved Pop-up Blocker

Block pop-up which navigates the page.

import.meta

It exposes the URL for the module as import.meta.url.

window.alert()

No longer brings a background tab to the foreground.

Performance Monitor

Console Sidebar

Group similar Console messages

[rogerxu]

Chrome 65

New in Chrome 65  |  Web  |  Google Developers What's New In DevTools (Chrome 65)  |  Web  |  Google Developers

CSS Paint API

The CSS Paint API allows you to grammatically generate an image for CSS properties like background-image or border-image.

Server Timing API

The new Server Timing API allows your server to pass timing information to the browser; giving you a better picture of your overall performance by adding a Server-Timing header to your response:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

display: contents

Adding display: contents to the outer div, makes the outer div disappear and its constraints are no longer applied to the inner div. The inner div is now 100% width.

Local Overrides

Override network requests and serve local resources on your filesystem instead.

The Changes tab

Track changes that you make locally in DevTools via the new Changes tab.

Accessibility pane

Use the Accessibility pane on the Elements panel to investigate the accessibility properties of the currently-selected element.

Contrast ratio in the Color Picker

Reliable code stepping with workers and asynchronous code

[rogerxu]

Chrome 66

New in Chrome 66  |  Web  |  Google Developers

What's New In DevTools (Chrome 66)  |  Web  |  Google Developers

CSS Typed Object Model

el.attributeStyleMap.set('opacity', 0.3);
const oType = el.attributeStyleMap.get('opacity').value; // 0.3

It also helps to eliminate bugs caused by forgetting to cast the value from a string to a number, and it automatically handles rounding and clamping of values.

el.style.opacity = 3;
const opacity = el.computedStyleMap().get('opacity').value;
console.log(opacity);
> 1

Async Clipboard API

navigator.clipboard.writeText('Copy me!')
  .then(() => {
    console.log('Text is on the clipboard.');
  });

navigator.clipboard.getText()
  .then((text) => {
    console.log('Clipboard: ', text);
  });

New Canvas Context BitmapRenderer

1. Call createImageBitmap and hand it an image blob, to create the image.
2. Grab the bitmaprenderer context from the canvas.
3. Then transfer the image in.

const image = await createImageBitmap(imageBlob);
const context = el.getContext('bitmaprenderer');
context.transferFromImageBitmap(image);

AudioWorklet

autocomplete attribute in TextArea and Select

autocapitalize attribute on for

trimStart() and trimEnd() for strings

Blackboxing in the Network panel

The Initiator column in the Network panel tells you why a resource was requested. After blackboxing a script, it hides any calls from the script that you blackboxed.

Pretty-printing in the Preview and Response tabs

The Preview tab in the Network panel now pretty-prints resources by default when it detects that those resources have been minified.

Previewing HTML content in the Preview tab

Auto-adjust zooming in Device Mode

Local Overrides now works with some styles defined in HTML

[rogerxu]

Chrome 67

New in Chrome 67  |  Web  |  Google Developers

Desktop PWAs

Generic Sensor API

const sensor = new Gyroscope({frequency: 500});
sensor.start();

sensor.onreading = () => {
    console.log("X-axis " + sensor.x);
    console.log("Y-axis " + sensor.y);
    console.log("Z-axis " + sensor.z);
};

BigInt

let max = BigInt(Number.MAX_SAFE_INTEGER);
// → 9_007_199_254_740_991n
max = max + 9n;
// → 9_007_199_254_741_000n - Yay!

What's New In DevTools (Chrome 67)  |  Web  |  Google Developers

Search across all network headers and responses

CSS variable value previews in the Styles pane

Copy as fetch

Select Copy > Copy As Fetch to copy the fetch()-equivalent code.

Stop infinite loops

User Timing in the Performance tabs

Select JavaScript VM instances in the Memory panel

[rogerxu]

Chrome 68

New in Chrome 68  |  Web  |  Google Developers

Add to Home Screen changes

Page Lifecycle API

Payment Handler API

What's New In DevTools (Chrome 68)  |  Web  |  Google Developers

Assistive Console

Eager Evaluation

Argument hints

Autocomplete after function executions

ES2017 keywords in autocomplete

Add property path to watch

[rogerxu]

Chrome 69

New in Chrome 69  |  Web  |  Google Developers

CSS Scroll Snap

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

Display cutouts (notches)

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Web Locks API

navigator.locks.request('network_sync_lock', async lock => {
  // The lock has been acquired.
  await do_something();
  await do_something_else();
  // Now the lock will be released.
});