Google Chrome What's New - 80+

[rogerxu]

Google Chrome version history - Wikipedia

[rogerxu]

Chrome 80

Chrome 80 arrives with mixed content autoupgraded to HTTPS, cookie changes, and Contact Picker API | VentureBeat

New in Chrome 80  |  Web  |  Google Developers

Module workers

The Worker constructor accepts a new {type: "module"} option, which changes the way scripts are loaded and executed, to match <script type="module">

```javascript const worker = new Worker('worker.js', { type: 'module' }); ```

Optional chaining

// Still checks for errors and is much more readable.
const nameLength = db?.user?.name?.length;

Origin trial graduations

Periodic background sync

It periodically synchronizes data in the background, so that when a user opens your installed PWA, they always have the freshest data.

Contact picker

It's an on-demand API that allows users to select entries from their contact list and share limited details of the selected entries with a website.

Get installed related apps

The Get Installed Related Apps method allows your web app to check if your native app is installed on a user's device.

New origin trials

Content indexing API

The Content Indexing API, is a new origin trial, that allows you to add URLs and metadata of offline-capable content, to a local index, maintained by the browser, and easily visible to the user.

```javascript const registration = await navigator.serviceWorker.ready; await registration.index.add({ id: 'article-123', launchUrl: '/articles/123', title: 'Article title', description: 'Amazing article about things!', icons: [{ src: '/img/article-123.png', sizes: '64x64', type: 'image/png', }], }); ```

Notification triggers

Notification Triggers let you schedule notifications in advance, so that the operating system will deliver the notification at the right time - even if there is no network connectivity, or the device is in battery saver mode.

```javascript const swReg = await navigator.serviceWorker.getRegistration(); swReg.showNotification(title, { tag: tag, body: "This notification was scheduled 30 seconds ago", showTrigger: new TimestampTrigger(timestamp + 30 * 1000) }); ```

Link to text fragments

You can now link directly to text fragments on a page, by using #:~:text=something. Chrome will scroll to and highlight the first instance of that text fragment. For example

https://en.wikipedia.org/wiki/Rickrolling#:~:text=New%20York

display: minimal-ui

Setting display: minimal-ui on a Desktop PWA adds a back and reload button to the title bar of the installed PWA.

SVG favicons

Chrome now supports using SVG images as favicons.

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

Support for let and class redeclarations in the Console

Improved WebAssembly debugging

DevTools has started to support the DWARF Debugging Standard, which means increased support for stepping over code, setting breakpoints, and resolving stack traces in your source languages within DevTools.

Network panel updates

Request Initiator Chains in the Initiator tab

Highlight the selected network request in the Overview

URL and path columns in the Network panel

Updated User-Agent strings

DevTools supports setting a custom User-Agent string through the Network Conditions tab.

Coverage tab updates

Per-function or per-block coverage modes

Coverage must now be initiated by a page reload

[rogerxu]

Chrome 81

Chrome 81 arrives with Web NFC Origin Trial, AR features, and mixed images autoupgraded to HTTPS | VentureBeat

New in Chrome 81  |  Web  |  Google Developers

App icon badging

Badging of app icons makes it easy to subtly notify the user that there is some new activity that might require their attention, or to indicate a small amount of information, such as an unread count.

New origin trials

Web NFC

```javascript const reader = new NDEFReader(); async function startScan() { await reader.scan(); reader.onreading = (e) => { console.log(e.message); }; } ```

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

Cookie-related updates

Blocked cookies in the Cookies pane

The Cookies pane in the Application panel now colors blocked cookies with a yellow background.

Hover over CSS content properties to see unescaped values

Hover over the value of a content property to see the unescaped version of the value.

More detailed source map errors in the Console

[rogerxu]

Chrome 83

Chrome 83 arrives with redesigned security settings, third-party cookies blocked in Incognito | VentureBeat

New in Chrome 83  |  Web  |  Google Developers

Trusted types

Trusted types help prevent cross site scripting vulnerabilities.

With trusted types turned on, if I try to pass a string, it'll fail with a TypeError because the browser doesn’t know if it can trust the string.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

Instead, I need to either use a safe function, like textContent, pass in a trusted type, or create the element and use appendChild().

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

Updates to form controls

Origin trials

Measure memory with measureMemory()

performance.measureMemory() is a new API that makes it possible to measure the memory usage of your page, and detect memory leaks.

Updates to the Native File System API

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

Writable streams make it much easier to write to a file, and because it’s a stream, you can easily pipe responses from one stream to another.

New cross-origin policies

Some web APIs increase the risk of side-channel attacks like Spectre. To mitigate that risk, browsers offer an opt-in-based isolated environment called cross-origin isolated.

Web vitals

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

Emulate vision deficiencies

Open the Rendering tab and use the new Emulate vision deficiencies feature to get a better idea of how people with different types of vision deficiencies experience your site.

Emulate locales

You can now emulate locales by setting a location in Sensors > Location.

Cross-Origin Embedder Policy (COEP) debugging

The Network panel now provides Cross-Origin Embedder Policy debugging information.

The Status column now provides a quick explanation of why a request was blocked as well as a link to view that request's headers for further debugging:

The Response Headers section of the Headers tab provides more guidance on how to resolve the issues:

New icons for breakpoints, conditional breakpoints, and logpoints

The Sources panel has new icons for breakpoints, conditional breakpoints, and logpoints:

• Breakpoints are represented by red circles.
• Conditional Breakpoints are represented by half-red half-white circles.
• Logpoints are represented by red circles with Console icons.

View network requests that set a specific cookie path

Use the new cookie-path filter keyword in the Network panel to focus on the network requests that set a specific cookie path.

The Audits panel is now the Lighthouse panel

[rogerxu]

Chrome 84

Chrome 84 arrives with SameSite cookie changes, Web OTP API and Web Animations API | VentureBeat

New in Chrome 84  |  Web  |  Google Developers

App icon shortcuts

App icon shortcuts make it easy for users to quick start common tasks within your app.

Web animations API

• animation.ready and animation.finished have been promisified.
• The browser can now cleanup and remove old animations, saving memory and improving performance.
• And you can now combine animations using composite modes - with the add and accumulate options.

Content indexing API

If your content is available without a network connection. With the Content Indexing API, you can add URLs and metadata for content that’s available offline.

To add content to the index, call index.add() on the service worker registration, and provide the required metadata about the content.

```javascript const registration = await navigator.serviceWorker.ready; await registration.index.add({ id: 'article-123', url: '/articles/123', launchUrl: '/articles/123', title: 'Article title', description: 'Amazing article about things!', icons: [{ src: '/img/article-123.png', sizes: '64x64', type: 'image/png', }], }); ```

Wake lock API

To get a wake lock, call navigator.wakeLock.request(), it returns a WakeLockSentinel object, used to “release” the wake lock.

```javascript // Request the wake lock const wl = await navigator.wakeLock.request('screen'); // Release the wake lock wl.release(); ```

Origin trials

Idle detection

```javascript // Create the idle detector const idleDetector = new IdleDetector(); // Set up an event listener that fires when idle state changes. idleDetector.addEventListener('change', () => { const uState = idleDetector.userState; const sState = idleDetector.screenState; console.log(`Idle change: ${uState}, ${sState}.`); }); // Start the idle detector. await idleDetector.start({ threshold: 60000, signal, }); ```

Web Assembly SIMD

Web Assembly SIMD introduces operations that map to commonly available SIMD instructions in hardware. SIMD operations are used to improve performance, especially in multimedia applications.

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

Fix site issues with the new Issues tab

The new Issues tab in the Drawer aims to help reduce the notification fatigue and clutter of the Console.

View accessibility information in the Inspect Mode tooltip

The Inspect Mode tooltip now indicates whether the element has an accessible name and role and is keyboard-focusable.

Performance panel updates

View Total Blocking Time (TBT) information in the footer

TBT is a load performance metric that helps quantify how long it takes a page to become usable.

Layout Shift events in the new Experience section

The new Experience section of the Performance panel can help you detect layout shifts.

More accurate promise terminology in the Console

The Console now uses the term fulfilled, which aligns with the Promise spec:

Styles pane updates

Support for the revert keyword

The Styles pane's autocomplete UI now detects the revert CSS keyword, which reverts the cascaded value of a property to what the value would have been if no changes had been made to the element's styling.

Image previews

Hover over a background-image value in the Styles pane to see a preview of the image in a tooltip.

Color Picker now uses space-separated functional color notation

CSS Color Module Level 4 specifies that color functions like rgb() should support space-separated arguments. For example, rgb(0, 0, 0) is equivalent to rgb(0 0 0).

Deprecation of the Properties pane in the Elements panel

The Properties pane in the Elements panel has been deprecated. Run console.dir($0) in the Console instead.

App shortcuts support in the Manifest pane

[rogerxu]

Chrome 85

Chrome 85 arrives with tab management, 10% faster page loads, and PDF improvements | VentureBeat

New in Chrome 85  |  Web  |  Google Developers

Content Visibility

Applying content-visibility: auto to an element, tells the browser that it can skip the rendering work for that element until it scrolls into the viewport, providing a faster initial render.

.my-class {
  content-visibility: auto;
}

@property and CSS variables

Starting in Chrome 85, you can also define and set CSS properties directly in your CSS.

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Get installed related apps

The getInstalledRelatedApps() API makes it possible for you to check if your app is installed, then, customize the user experience.

Now, on Android, it can also check if your PWA is installed. And on Windows, it can check if your Windows UWP app is installed.

```javascript const relatedApps = await navigator.getInstalledRelatedApps(); relatedApps.forEach((app) => { console.log(app.id, app.platform, app.url); }); ```

Origin trials

Streaming requests with fetch()

```javascript const { readable, writable } = new TransformStream(); const responsePromise = fetch(url, { method: 'POST', body: readable, }); ```

Promise.any()

Promise.any returns a promise that is fulfilled by the first given promise to be fulfilled or rejected.

```javascript try { const first = await Promise.any(arrayOfPromises); console.log(first); } catch (error) { console.log(error.errors); } ```

String.prototype.replaceAll()

Replacing all instances in a string is easier with .replaceAll(), no more regular expressions!

```javascript const myName = 'My name is Bond, James Bond.' .replaceAll('Bond', 'Powers') .replace('James', 'Austin'); console.log(myName); // My name is Powers, Austin Powers. ```

AVIF image format

Chrome 85 adds decode support for AVIF, an image format encoded with AV1 and standardized by the Alliance for Open Media. AVIF offers significant compression gains vs. JPEG and WebP, with a recent Netflix study showing 50% savings vs. standard JPEG and > 60% savings on 4:4:4 content.

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

Style editing for CSS-in-JS frameworks

The Styles pane now has better support for editing styles that were created with the CSS Object Model (CSSOM) APIs.

Lighthouse 6 in the Lighthouse panel

Lighthouse 6.0 introduces three new metrics to the report: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT).

First Meaningful Paint (FMP) is deprecated in Lighthouse 6.0. It has also been removed from the Performance panel. Largest Contentful Paint is the recommended replacement for FMP.

Support for new JavaScript features

Optional chaining syntax autocompletion

> name?.

Syntax highlighting for private fields

Private class fields are now properly syntax-highlighted and pretty-printed in the Sources panel.

```javascript class User { #id; constructor () { this.#id = 888; } } ```

Syntax highlighting for Nullish coalescing operator

DevTools now properly pretty-prints the nullish coalescing operator in the Sources panel.

```javascript const foo = 0 ?? 88; ```

Line-wise copy and cut in Sources Panel

When performing copy or cut with no selection in the Sources panel editor, DevTools will copy or cut the current line content.

New icons for breakpoints, conditional breakpoints, and logpoints

[rogerxu]

Chrome 86

Chrome 86 brings password protections for Android and iOS, VP9 for macOS Big Sur | VentureBeat

New in Chrome 86  |  Web  |  Google Developers

File System Access

Today, you can use the <input type="file"> element read a file from disk. You can call showOpenFilePicker(), which shows a file picker, then returns a file handle that you can use to read the file.

```javascript async function getFileHandle() { const opts = { types: [ { description: 'Text Files', accept: { 'text/plain': ['.txt', '.text'], 'text/html': ['.html', '.htm'] } } ] }; return await window.showOpenFilePicker(opts); } ```

To save a file to disk, you can either use that file handle that you got earlier, or call showSaveFilePicker() to get a new file handle.

```javascript async function saveFile(fileHandle) { if (!fileHandle) { fileHandle = await window.showSaveFilePicker(); } const writable = await fileHandle.createWritable(); await writable.write(contents); await writable.close(); } ```

Calling showDirectoryPicker() will open a directory, allowing you to get a list of files, or create new files in that directory.

Origin Trial: WebHID

Human interface devices, commonly referred to as HID, takes input from, or provides output to... humans.

Origin Trial: Multi-Screen Window Placement API

The Multi-Screen Window Placement API, starts an origin trial in Chrome 86, it allows you to enumerate the screens connected to your machine, and place windows on specific screens. Being able to place windows on specific screens is critical for things like presentation apps, financial services apps, and more.

Once the user has granted permission, calling window.getScreens() returns a promise that resolves with an array of Screen objects.

CSS Selector :focus-visible

The new CSS selector, :focus-visible, lets you opt-in to the same heuristic the browser uses when it's deciding whether to display the default focus indicator.

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

New Media panel

Capture node screenshots via Elements panel context menu

You can take a screenshot of the table of content by right clicking the element and select Capture node screenshot.

Emulate missing local fonts

Open the Rendering tab and use the new Disable local fonts feature to emulate missing local() sources in @font-face rules.

Emulate inactive users

You can now use DevTools to emulate idle state changes in the Sensors tab for both the user state and the screen state.

Support for new JavaScript features

• Logical assignment operators - DevTools now supports logical assignment with the new operators &&=, ||=, and ??= in the Console and Sources panels.
• Pretty-print numeric separators - DevTools now properly pretty-prints the numeric separators in the Sources panel.

New frame details view in Application panel

DevTools now show a detailed view for each frame. Access it by clicking a frame under the Frames menu in the Application panel.

Accessible color suggestion in the Styles pane

DevTools now provides color suggestions for low color contrast text.

DevTools now provides color suggestions for low color contrast text.

Imported font faces are now added to the list of CSS auto-completion when editing the font-family property in the Styles pane.

[rogerxu]

Chrome 87

Chrome 87 brings tab throttling, Occlusion Tracking on Windows, back/forward cache on Android | VentureBeat

What’s New in Chrome 87, Available Now

Revamped PDF Viewer

The new PDF view includes a sidebar that shows a preview of all the pages. The zoom buttons are now at the top of the screen along with a rotate button and “Fit to Page” option. The menu also includes a new option to view pages side-by-side.

Chrome 87 rolling out with significant speed improvements, more battery life - 9to5Google

New in Chrome 87  |  Web  |  Google Developers

Camera pan, tilt, zoom

Once the user has granted permission, you can then call videoTrack.applyConstraints() to adjust the pan, tilt, and zoom.

```javascript function enablePan(capabilities, settings) { const input = document.getElementById('rangePan'); input.min = capabilities.pan.min; input.max = capabilities.pan.max; input.step = capabilities.pan.step; input.value = settings.pan; input.addEventListener('input', async () => { const opts = { advanced: [{ pan: input.value }] }; await videoTrack.applyConstraints(opts); }); } ```

Range requests and service workers

Starting in Chrome 87, passing range requests through to the network from inside a service worker will "just work."

```javascript self.addEventListener('fetch', (event) => { // The Range: header will pass through // in browsers that behave correctly. event.respondWith(fetch(event.request)); }); ```

Origin Trial: Font access API

With the font access API, a site can now enumerate the installed fonts, giving users access to all of the fonts on their system.

```javascript // Query for all available fonts and log metadata. const fonts = navigator.fonts.query(); try { for await (const metadata of fonts) { console.log(`${metadata.family} (${metadata.fullName})`); } } catch (err) { console.error(err); } // Roboto (Roboto Black) // Roboto (Roboto Black Italic) // Roboto (Roboto Bold) ```

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

New CSS Grid debugging tools

When an HTML element on your page has display: grid or display: inline-grid applied to it, you can see a grid badge next to it in the Elements panel. Click the badge to toggle the display of a grid overlay on the page.

The new Layout pane has a Grid section offering you a number of options for viewing the grids.

New WebAuthn tab

Select More options > More tools > WebAuthn to open the WebAuthn tab.

Move tools between top and bottom panel

DevTools now support moving tools in DevTools between the top and bottom panel. This way, you can view any two tools at once.

View the Computed sidebar pane in the Styles pane

The Computed sidebar pane in the Styles pane is collapsed by default.

Grouping CSS properties in the Computed pane

You can now group the CSS properties by categories in the Computed pane.

New resource-type and url filters in the Network panel

[rogerxu]

Chrome 88

What’s New in Chrome 88, Available Now

Better Dark Theme Support on Windows 10

No More FTP in Google Chrome

Tab Search

chrome://flags/#enable-tab-search

Chrome 88 rolling out: Edit saved passwords, ends Mac OS X 10.10 support - 9to5Google

Edit saved passwords

Chrome is now letting users manually “Edit password” from the central list on chrome://settings/passwords.

New in Chrome 88 - Chrome Developers

What's New In DevTools (Chrome 88) - Chrome Developers

[rogerxu]

Chrome 89

What’s New in Chrome 89, Available Now

Chrome 89 rolling out: Reading list, Tab Search, more - 9to5Google]

Reading list

Tab search

You can tap the dropdown icon in the top-right corner or use Shift+Command+A (Mac) to get a list of pages open across all windows. The browser displays five at a time, while you can also quickly close tabs from this view. If it’s not yet live, manually turn it on:

chrome://flags/#enable-tab-search

New in Chrome 89 - Chrome Developers

What's New In DevTools (Chrome 89) - Chrome Developers