Google Chrome What's New - 70+

[rogerxu]

Google Chrome version history - Wikipedia

[rogerxu]

Chrome 70

New in Chrome 70  |  Web  |  Google Developers

Desktop Progressive Web Apps on Windows & Linux

Credential Management API: Public Key Credentials

Named workers

In Chrome 70, workers now have a name attribute, which is specified by an optional argument on the constructor.

const url = '/scripts/my-worker.js';

const wNYC = new Worker(url, {name: 'NewYork'});

const oSF = {name: 'SanFrancisco'};
const wSF = new Worker(url, oSF);

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

Live Expressions in the Console


Highlight DOM nodes during Eager Evaluation


Autocomplete Conditional Breakpoints


Debug Node.js apps with ndb

[GoogleChromeLabs/ndb: ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools](https://github.com/GoogleChromeLabs/ndb)

[rogerxu]

Chrome 71

New in Chrome 71  |  Web  |  Google Developers

Display relative times with Intl.RelativeTimeFormat()

const rtf = new Intl.RelativeTimeFormat('en');

rtf.format(3.14, 'second');
// → 'in 3.14 seconds'

rtf.format(-15, 'minute');
// → '15 minutes ago'

Specifying underline location for vertical text

.left {
  text-underline-position: left;
}

.right {
  text-underline-position: right;
}


Speech synthesis requires user activation

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

Hover over a Live Expression to highlight a DOM node


Store DOM nodes as global variables


Initiator and priority information now in HAR imports and exports


Access the Command Menu from the Main Menu

Picture-in-Picture breakpoints


[rogerxu]

Chrome 72

New in Chrome 72  |  Web  |  Google Developers

Public class fields

class Counter {
  _value = 0;
  get value() {
    return this._value;
  }
  increment() {
    this._value++;
  }
}

const counter = new Counter();
console.log(counter.value);
// → 0
counter.increment();
console.log(counter.value);
// → 1

User Activation API


Localizing lists of things with Intl.format

const lf = new Intl.ListFormat('en');
lf.format(['Frank']);
// → 'Frank'
lf.format(['Frank', 'Christine']);
// → 'Frank and Christine'
lf.format(['Frank', 'Christine', 'Flora']);
// → 'Frank, Christine, and Flora'
lf.format(['Frank', 'Christine', 'Flora', 'Harrison']);
// → 'Frank, Christine, Flora, and Harrison'

const lf = new Intl.ListFormat('en', { type: 'disjunction' });
lf.format(['Frank']);
// → 'Frank'
lf.format(['Frank', 'Christine']);
// → 'Frank or Christine'
lf.format(['Frank', 'Christine', 'Flora']);
// → 'Frank, Christine, or Flora'
lf.format(['Frank', 'Christine', 'Flora', 'Harrison']);
// → 'Frank, Christine, Flora, or Harrison'

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

Visualize performance metrics


Highlight text nodes


Copy JS path

 ```javascript document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)') ```

Audits panel updates

including a new audit that detects JS libraries and new keywords for accessing the Audits panel from the Command Menu.

[rogerxu]

Chrome 73

New in Chrome 73  |  Web  |  Google Developers

Signed HTTP Exchanges

Signed HTTP Exchanges (SGX), part of an emerging technology called Web Packages is now available in Chrome 73. A Signed HTTP Exchange makes it possible to create “portable” content that can be delivered by other parties, and this is the key aspect, it retains the integrity and attribution of the original site.

Constructable style sheets

Constructable Stylesheets make it possible to define and prepare shared CSS styles, and then apply those styles to multiple Shadow Roots or the Document easily and without duplication.

 Updates to a shared `CSSStyleSheet` are applied to all roots where it’s been adopted, and adopting a stylesheet is fast and synchronous once the sheet has been loaded. ```js const sheet = new CSSStyleSheet(); // replace all styles synchronously: sheet.replaceSync('a { color: red; }'); // this throws an exception: try { sheet.replaceSync('@import url("styles.css")'); } catch (err) { console.error(err); // imports are not allowed } // replace all styles, allowing external resources: sheet.replace('@import url("styles.css")') .then(sheet => { console.log('Styles loaded successfully'); }) .catch(err => { console.error('Failed to load:', err); }); ```

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

Logpoints

Use Logpoints to log messages to the Console without cluttering up your code with console.log() calls.


Detailed tooltips in Inspect Mode

When inspecting a node, DevTools now shows an expanded tooltip containing commonly important information like font size, font color, contrast ratio, and box model dimensions.


Navigate the Console with the keyboard

Pressing Shift+Tab focuses the last message (or result of an evaluated expression). If the message contains links, the last link is highlighted first. Pressing Enter opens the link in a new tab. Pressing the Left arrow key highlights the entire message.


Pressing the Right arrow key expands a collapsed stack trace (or object, array, and so on).


AAA contrast ratio line in the Color Picker


Save custom geolocation overrides

The Sensors tab now lets you save custom geolocation overrides.

 In the **Geolocation** section click **Manage**. **Settings** > **Geolocations** opens up. 

Code folding

The Sources and Network panels now support code folding.

Settings > Preferences > Sources enable Code folding.


[rogerxu]

Chrome 74

New in Chrome 74  |  Web  |  Google Developers

Private class fields

class IncreasingCounter {
  // Private class field
  #privateValue = 0;
  get value() {
    return this.#privateValue;
  }
  increment() {
    this.#privateValue++;
  }
}

prefers-reduced-motion

@media (prefers-reduced-motion: reduce)

CSS transition events

• transitionrun
• transitionstart
• transitionend
• transitioncancel

Feature policy API updates

```html ``` HTTP Header: ```http Feature-Policy: geolocation 'self' ``` - You can get a list of features allowed with `document.featurePolicy.allowedFeatures()`. - You can check if a specific feature is allowed with `document.featurePolicy.allowsFeature(...)`. - You can get a list of domains used on the current page that allow a specified feature with `document.featurePolicy.getAllowlistForFeature()`.

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

Highlight all nodes affected by CSS property

Hover over a CSS property that affects a node's box model, such as padding or margin, to highlight all nodes affected by that declaration.


WebSocket binary message viewer


Capture area screenshot in the Command Menu

Command Menu > Capture area screenshots. Drag your mouse over the section of the viewport that you want to screenshot.


Service worker filters in the Network panel

Type is:service-worker-initiated or is:service-worker-intercepted in the Network panel filter text box to view requests that were caused (initiated) or potentially modified (intercepted) by a service worker.


Long tasks in Performance recordings


First Paint in the Timings section

The Timings section of a Performance recording now marks First Paint.


[rogerxu]

Chrome 75

New in Chrome 75  |  Web  |  Google Developers

Low latency canvas contexts

Add desynchronized: true to the options object when creating the canvas.

```js const opts = { desynchronized: true }; const ctx = canvas.getContext('2d', opts); ```

Share files with the Web Share API

Use navigator.canShare to check if file sharing is supported.

```javascript const webShareAvailable = { links: 'share' in navigator, files: 'canShare' in navigator, }; ``` ```javascript if (webShareAvailable.files) { const shareData = { files: filesArray }; if (navigator.canShare(shareData)) { shareData.title = 'Squooshed files.'; navigator.share(shareData) .then(...) .catch(...); } else { // File sharing not supported } } ```

Numeric separators

Numeric literals now allow underscores (_, U+005F) as separators to make them more readable. For example, 1_000_000_000 will be interpreted by mathematical operations as equivalent to 1000000000.

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

Meaningful preset values when autocompleting CSS functions

The new autocomplete behavior. DevTools is autocompleting to filter: blur(1px) and the change is visible in the viewport.


Clear site data from the Command Menu


View all IndexedDB databases


View a resource's uncompressed size on hover

Hovering over the Size column to view a resource's uncompressed size.


Inline breakpoints in the breakpoint pane


IndexedDB and Cache resource counts


Setting for disabling the detailed inspect tooltip

You can now disable these detailed tooltips from Settings > Preferences > Elements > Show Detailed Inspect Tooltip.

Setting for toggling tab indentation in the Sources panel editor

To override the default behavior and use Tab to move focus, enable Settings > Preferences > Sources > Enable Tab Moves Focus.

[rogerxu]

Chrome 76

New in Chrome 76  |  Web  |  Google Developers

PWA Omnibox Install Button

If your site meets the Progressive Web App installability criteria, Chrome will show an install button in the omnibox indicating to the user that your PWA can be installed. If the user clicks the install button, it’s essentially the same as calling prompt() on the beforeinstallprompt event; it shows the install dialog, making it easy for the user to install your PWA.

More control over the PWA mini-infobar

On mobile, Chrome shows the mini-infobar the first time a user visits your site if it meets the Progressive Web App installability criteria.

Starting in Chrome 76, calling preventDefault() on the beforeinstallprompt event will stop the mini-infobar from appearing.

```javascript window.addEventListener('beforeinstallprompt', (e) => { // Don't show mini-infobar e.preventDefault(); // Stash the event so it can be triggered later. deferredPrompt = e; // Update UI to promote PWA installation pwaInstallAvailable(true); }); ```

Faster updates to WebAPKs

When a Progressive Web App is installed on Android, Chrome automatically requests and installs a Web APK. After it’s been installed, Chrome periodically checks if the web app manifest has changed.

Starting in Chrome 76, Chrome will check the manifest more frequently; checking every day, instead of every three days.

Dark mode

The prefers-color-scheme media query, allows you to adjust the look and feel of your site to match the user's preferred mode.

```css @media (prefers-color-scheme: dark) { body { background-color: black; color: white; } } ```

Promise.allSettled()

Promise.allSettled() is similar to Promise.all(), except it waits until all of the promises are settled before returning.

```javascript const promises = [ fetch('/api-call-1'), fetch('/api-call-2'), fetch('/api-call-3'), ]; // Imagine some of these requests fail, and some succeed. await Promise.allSettled(promises); // All API calls have finished (either failed or succeeded). ```

Reading blobs is easier

Blobs are easier to read with three new methods: text(), arrayBuffer(), and stream(); this means we don’t have to create a wrapper around file reader any more!

```javascript // New easier way const text = await blob.text(); const aBuff = await blob.arrayBuffer(); const stream = await blob.stream(); // Old, wrapped reader return new Promise((resolve) => { const reader = new FileReader(); reader.addEventListener('loadend', (e) => { const text = e.srcElement.result; resolve(text); }); reader.readAsText(file); }); ```

Image support in the async clipboard API

Support for images to the Asynchronous Clipboard API, making it easy to programmatically copy and paste images.

Image Support for the Async Clipboard API  |  Web  |  Google Developers

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

Autocomplete with CSS values

The Style pane's autocomplete UI now supports CSS values.


A new UI for network settings


WebSocket messages in HAR exports

The _webSocketMessages property begins with an underscore to indicate that it's a custom field.

...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...

HAR import and export buttons


Service worker registration port numbers


Inspect Background Fetch and Background Sync events

Use the new Background Services section of the Application panel to monitor Background Fetch and Background Sync events.

 

[rogerxu]

Chrome 77

New in Chrome 77  |  Web  |  Google Developers

Largest Contentful Paint

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.

The formdata event

The formdata event is a low-level API that lets any JavaScript code participate in a form submission.

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

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.

Native lazy loading

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="...">

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

Copy element's styles

Visualize layout shifts

DevTools can now help you detect layout shifting:

1. Open the Command Menu.
2. Start typing Rendering.
3. Run the Show Rendering command.
4. Enable the Layout Shift Regions checkbox. As you interact with a page, layout shifts are highlighted blue.

Prefetch cache in Network panel

The Size column of the Network panel now says (prefetch cache) when a resource was loaded from the prefetch cache.

Private properties when viewing objects

The Console now shows private class fields in its object previews.

Notifications and push messages in the Application panel

The Background Services section of the Application panel now supports Push Messages and Notifications.

[rogerxu]

Chrome 78

New in Chrome 78  |  Web  |  Google Developers

CSS Properties and Values API

html {
  --my-color: url(‘not-a-color’); // Oops, not a color!
}
.thing {
  color: var(--my-color);
}

Registering a property is as easy as calling window.CSS.registerProperty() and providing the name of the property you’re defining the type of property it is, if it should inherit, and it’s initial value.

window.CSS.registerProperty({
  name: '--my-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'black',
});

Fresher service workers

Byte-for-byte checks are now performed for service worker scripts imported by importScripts().

New origin trials

Origin trials provide an opportunity for us to validate experimental features and APIs, and make it possible for you to provide feedback on their usability and effectiveness in broader deployment.

Opting into an origin trial allows you to build demos and prototypes that your beta testing users can try for the duration of the trial without requiring them to flip any special flags in Chrome.

Native File System

SMS Receiver

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

Multi-client support in the Audits panel

You can now use the Audits panel in combination with other DevTools features like Request Blocking and Local Overrides.

Payment Handler debugging

The Background Services section of the Application panel now supports Payment Handler events.

Largest Contentful Paint in the Performance panel

[rogerxu]

Chrome 79

New in Chrome 79  |  Web  |  Google Developers

Maskable Icons

Installed Progressive Web Apps on Android now support maskable icons.

In the web app manifest, you’ll need to add a new `purpose` property to the icon, and set its value to `maskable`. ```json { ... "icons": [ ... { "src": "path/to/maskable_icon.png", "sizes": "196x196", "type": "image/png", "purpose": "maskable" ] ... } ```

Web XR

You can now create immersive experiences with the WebXR Device API.

New origin trials

Wake Lock

To request a wake lock, you need to call navigator.wakeLock.request(), and save the WakeLockSentinel object that it returns.

```javascript // The wake lock sentinel. let wakeLock = null; // Function that attempts to request a wake lock. const requestWakeLock = async () => { try { wakeLock = await navigator.wakeLock.request('screen'); wakeLock.addEventListener('release', () => { console.log('Wake Lock was released'); }); console.log('Wake Lock is active'); } catch (err) { console.error(`${err.name}, ${err.message}`); } }; ``` ```javascript // Function that attempts to release the wake lock. const releaseWakeLock = async () => { if (!wakeLock) { return; } try { await wakeLock.release(); wakeLock = null; } catch (err) { console.error(`${err.name}, ${err.message}`); } }; ```

rendersubtree attribute

There are times when you don’t want part of the DOM to render immediately. For example scrollers with a large amount of content, or tabbed UIs where only some of the content is visible at any given time.

The new rendersubtree attribute tells the browser it can skip rendering that subtree. This allows the browser to spend more time processing the rest of the page, increasing performance.

When `rendersubtree` is set to `invisible`, the element's content is not drawn or hit-tested, allowing for rendering optimizations. Changing the `rendersubtree` to `activatable`, makes the content visible by removing the `invisible` attribute, and rendering the content.

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

Debug why a cookie was blocked

After recording network activity, select a network resource and then navigate to the updated Cookies tab to understand why that resource's request or response cookies were blocked.

View cookie values

Simulate different prefers-color-scheme and prefers-reduced-motion preferences

The prefers-color-scheme media query lets you match your site's style to your user's preferences.

Timezone emulation (: #timezone }

The Sensors tab now lets you not only override geolocation, but also emulate arbitrary timezones and test the impact on your web apps. Perhaps surprisingly, this new feature improves the reliability of geolocation emulation as well: previously, web apps could detect location spoofing by matching the location against the user's local timezone. Now that geolocation and timezone emulation are coupled, this category of mismatches is eliminated.

Code coverage updates

The Coverage tab now uses new colors to represent used and unused code.

Debug why a network resource was requested

After recording network activity, select a network resource and then navigate to the Initiator tab to understand why the resource was requested. The Request call stack section describes the JavaScript call stack leading up to the network request.

Console and Sources panels respect indentation preferences again

Go to Settings > Preferences > Sources > Default Indentation to set your preference.

New shortcuts for cursor navigation

Press Ctrl+P in the Console or Sources panels to move your cursor to the line above. Press Ctrl+N to move your cursor to the line below.