Google Chrome

[rogerxu]

Google Chrome version history - Wikipedia

Chrome | Google Blog

Chromium Blog

Chrome Enterprise release notes - Google Chrome Enterprise Help

Google Chrome - 9to5Google

[rogerxu]

Console

Beyond Console Debugging Tricks – OutSystems Experts – Medium

Things you probably didn’t know you could do with Chrome’s Developer Console

Print a Stack Trace

Like debugger;

console.trace();

Display Object as Table

console.table(array);

Set a Timer

console.table(array);

Check the CPU Consumption

console.profile();

Check the CPU Consumption

console.dir(obj);

Break at a function

debug(myFunc);

Monitor the Arguments of a Function

monitor(myFunc);

Monitor Events

monitorEvents($('selector'));
monitorEvents($('selector'), 'eventName');
monitorEvents($('selector'), ['eventName1', 'eventName2']);
unmonitorEvents($('selector'));

Select DOM Elements

Equivalent to the jQuery selector syntax. It returns the first element in the DOM that matches the selector.

$('tagName')
$('.class')
$('#id')

Use $$ to select all the elements.

$$('tagName')
$$('.class')

Use $x to select by XPath

$x("//tagName'")
$x("//div[@id='id']")
$x("//div[contains(@class, 'class')]")

Browser as Editor

document.body.contentEditable = true

For entire page

document.designMode = 'on';

Event Listeners

getEventListeners($('#firstName')).click[0].listener

Last Result Value

$_

[rogerxu]

Chrome Extensions

Extensions

Featured

• Advanced Font Settings
• Chrono下载管理器
• [Collamark]
• crxMouse Chrome™ 手势
• GhostText
• GitCodeTree
• Google Results Previewer
• Google 艺术与文化
• GoTo Tab
• Grammarly for Chrome
• HTTP/2 and SPDY indicator
• IP Whois & Flags Chrome & Websites Rating
• Isometric Contributions
• LastPass
• OctoLinker
• OneTab
• Proxy SwitchyOmega
• Push to Kindle
• Read Aloud
• RSS Feed Reader
• Save to Pocket
• Session Buddy
• SingleFileZ
• Stylus
  • Sync: OneDrive
• Surfingkeys
• TabPlus
• Tabs Outliner
• Talend API Tester - Free Edition
• The Great Suspender
• Toby Mini
• uBlock Origin
• UI5 Inspector
• Web Clipper
• WEB前端助手(FeHelper)
• WhatRuns
• 暴力猴
  • Sync: Google Drive / OneDrive
• 二管家
• 集装箱
• 简悦 - SimpRead
  • Sync: Dropbox
• 全能启动器 - Steward
• 沙拉查词
• 书签侧边栏
• 图片助手(ImageAssistant) 批量图片下载器
• [一键切换]

General

• Accessibility Insights for Web
• BehindTheOverlay
• [Bookmarks clean up]()
• [Daily 2.0 - Source for Busy Developers]()
• [Dualsub]
• [Earth View from Google Earth]
• Fonts Ninja
• IE Tab
• JSON Viewer Awesome
• [Lighthouse]
• Local CDN
• Mercury Reader
• [NIM(Node.js 调试管理工具)]
• [Password Depot Extension]
• [PlantUML Visualizer]
• [Worklog Tracker]
• WorldBrain's Memex
• 单词发现者：扩大您的词汇
• 图流-看图助手

Alternative

• Bulk Download Images(ZIG)
• Cato
• ChromeVox Classic Extension
• cVim
• EasyReader
• Enhanced History
• Extensions Manager
• Evernote Web Clipper
• [Fatkun图片批量下载]
• Google Input Tools
• Google Translate
• ImTranslator
• JSONViewer
• MagicScroll Web Reader
• Octotree
• One-Click Extensions Manager
• Play.ht: Audio Articles for Medium Writers
• Quick Download for Tumblr
• ReadFree 传送门
• [Reading Time]
• Readium
• SimpleExtManager
• [smartUp手势]
• [Stash]
• Tabli
• Tampermonkey
• UI5 Automation Designer
• Vimium
• [Web Maker]
• WhatFont
• 喵喵折+
• 右键搜

Web Apps

Featured

• Any.DO
• Chrome Remote Desktop
• Google Keep
• Postman

[rogerxu]

Switches

Run Chromium with flags - The Chromium Projects

List of Chromium Command Line Switches « Peter Beverloo

[rogerxu]

Flags

chrome://flags

(350) 11 Chrome Settings You Should Change Now! - YouTube

• #show-saved-copy
• #enable-parallel-downloading
• #new-omnibox-answer-types
• #omnibox-ui-show-suggestion-favicons
• #automatic-tab-discarding
• #enable-tab-audio-muting
• #enable-fast-unload
• #enable-scroll-anchoring

[rogerxu]

What's New in 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.
});

[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.

[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

[rogerxu]

Chrome 90

What’s New in Chrome 90, Available Now

AV1 Encoder Optimized for Video Calls

Chrome 90 on the desktop has support for the AV1 Encoder, which uses the WebRTC standard and is optimized for video calling.

HTTPS is Now Default

Chrome 90 will attempt to load websites over HTTPS by default.

Hide the Reading List Without a Flag

Give Chrome Windows Specific Names

Chrome 90 rolling out: AV1 encoder optimized for video calls, easily hide Reading List - 9to5Google

New in Chrome 90 - Chrome Developers

Prevent overflow with overflow:flip

.overflow-clip {
  overflow: clip;
}

Using overflow: clip makes it possible for you to prevent any type of scrolling for the box, including programmatic scrolling. That means the box is not considered a scroll container; it does not start a new formatting context, which gives it better performance than overflow: hidden.

Declarative Shadow DOM

<host-element>
  <template shadowroot="open">
    <slot></slot>
  </template>
  <h2>Light content</h2>
</host-element>

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

New CSS flexbox debugging tools

In addition, the Layout pane has a Flexbox section, display all the flexbox elements on the page.

[rogerxu]

Chrome 91

What’s New in Chrome 91, Available Now

Copy & Paste for Files

Previously, if you wanted to attach a file to an email, you’d have to drag it from the file explorer and drop it in the email tab. You can now simply Ctrl+C to copy and Ctrl+V to paste it.

Chrome for Android Can “Follow” Websites

A new option in the menu will allow you to “Follow” a website. Whenever that site published new content, it will show up in the new “Following” section on the New Tab page.

Chrome 91 rolling out: freeze Tab Groups, Android tablets load desktop sites - 9to5Google

Freeze Tab Groups

When Tab Groups are collapsed to take up less space, Chrome 91 will freeze those pages to free up system resources.

Android tablets load desktop site

Chrome on Android tablets now requests the desktop versions of sites rather than the mobile variant if the screen size is large enough. Smaller tablets will continue to request the phone version.

New in Chrome 91 - Chrome Developers

Suggested names for File System Access API

Pass a suggestedName property as part of the showSaveFilePicker options.

const fileHandle = await self.showSaveFilePicker({
  suggestedName: 'Untitled Text.txt',
  types: [{
    description: 'Text documents',
    accept: {
      'text/plain': ['.txt'],
    },
  }],
});

The same goes for the default starting directory.

const fileHandle = await self.showOpenFilePicker({
  startIn: 'documents'
});

Reading files from the clipboard

window.addEventListener('paste', onPaste);

async function onPaste(e) {
  const file = e.clipboardData.files[0];
  const contents = await file.text();
  ...
}

Share credentials on affiliated sites

Host the assetlinks.json file in the .well-known folder for each domain.

```json [{ "relation": ["delegate_permission/common.get_login_creds"], "target": { "namespace": "web", "site": "https://www.example.com" } }, { "relation": ["delegate_permission/common.get_login_creds"], "target": { "namespace": "web", "site": "https://www.example.co.uk" } }] ```

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

Visualize CSS scroll-snap

You can now toggle the scroll-snap badge in the Elements panel to inspect the CSS scroll-snap alignment.

New Memory inspector

Use the new Memory inspector to inspect an ArrayBuffer in JavaScript, as well as the Wasm memory.

New badge settings pane in the Elements panel

You can now selectively enable or disable badges via the Badge settings in the Elements panel.

Enhanced image preview with aspect ratio information

Image previews in the Elements panel now displays more information on the image - rendered size, rendered aspect ratio, intrinsic size, intrinsic aspect ratio, and file size.

New network conditions button with options to configure Content-Encodings

A new network conditions button is added in the Network panel. Click on it to open the Network conditions tab.

A new Accepted Content-Encodings option is added to the Network conditions tab.

Support hover preview with [] notation

[rogerxu]

Chrome 92

Chrome

What’s New in Chrome 92, Available Now (howtogeek.com)

New Chrome Action for Safety Checks

Web Apps Can Handle Files

It’s common to get asked which app you want to use to open a file on your Android device. Now, you’ll also see web apps as available options.

Memories: A New Way to See History

Memories is available under a flag (chrome://flags/#memories) on the desktop. Once it’s enabled, you can go to chrome://memories, and you’ll see a brand new UI for your history.

Web Feed

Instead of finding an RSS feed and adding it to your RSS reader of choice, you can simply “Follow” a website from Chrome, and new content will appear on the “New Tab” page under the “Following” tab.

Chrome 92 rolling out: Better permission, Sharing Hub, more - 9to5Google

DevTools

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

CSS grid editor

Support for const redeclarations in the Console

Source order viewer

You can now view the order of source elements on screen for better accessibility inspection.

New shortcut to view frame details

View iframe details by right clicking on the iframe element in the Elements panel, and select Show frame details.

This takes you to a view of the iframe's details in the Application panel where you can examine document details, security & isolation status, permissions policy, and more to debug potential issues.

Enhanced CORS debugging support

Cross-origin resource sharing (CORS) errors are now surfaced in the Issues tab. There are various reasons causing CORS errors. Click to expand each issue to understand the potential causes and solutions.

Rename XHR label to Fetch/XHR in the Network panel

The XHR label is now renamed to Fetch/XHR. This change makes it clearer that this filter includes both XMLHttpRequest and Fetch API network requests.

[rogerxu]

Chrome 93

Features

What’s New in Chrome 93, Available Now (howtogeek.com)

Sync Two-Factor OTP Codes Across Devices

Google rolling out Chrome 93 on Mac, Windows, Android, iOS - 9to5Google

Dev Features

New in Chrome 93 - Chrome Developers

CSS Module Scripts

You can now load CSS style sheets with import statements, just like JavaScript modules.

Unlike other ways of applying CSS from JavaScript, there is no need to create elements, or mess with JavaScript strings of CSS text.

To use it, import the style sheet with assert {type: 'css'}, then apply it to the document or shadowRoot by calling adoptedStyleSheets.

import sheet from './styles.css' assert { type: 'css' };
document.adoptedStyleSheets = [sheet];
shadowRoot.adoptedStyleSheets = [sheet];

But beware, if you leave off the assert - the file will be treated as JavaScript, and won't work!

Multi-Screen Window Placement API

The Multi-Screen Window Placement API makes it possible to enumerate the displays connected to the users machine, and place windows on specific screens.

You can quickly check if there's more than one screen connected to the device:

const isExtended = window.screen.isExtended;
// returns true/false

But, the key functionality is in window.getScreens(), which provides all the details about the attached displays.

const screens = await window.getScreens();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

For example, you can determine the primary screen, then use requestFullscreen() to display an element on that screen.

try {
  const screens = await window.getScreens();
  const primary = screens.filter((screen) => screen.primary)[0];
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

And it provides a way to listen for changes, for example if a new display is plugged in, or removed.

const screens = await window.getScreens();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

DevTools

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

Editable CSS container queries in the Styles pane

You can now view and edit CSS container queries in the Styles pane.

Container queries provide a much more dynamic approach to responsive design. The @container at-rule works in a similar way to a media query with @media. However, instead of querying the viewport and user agent for information, @container queries the ancestor container that matches certain criteria.

Web bundle preview in the Network panel

Web bundle is a file format for encapsulating one or more HTTP resources in a single file. You can now preview the web bundle content in the Network panel.

Better string handling in the Console

New context menu in the Console allows you to copy any string in as content, JavaScript literal or JSON literal.

Pretty-printing JSON responses in the Network panel

You can now pretty print JSON responses in the Network panel.

Open a JSON response in the Network panel, click on the {} icon to pretty-print it.

[rogerxu]

Chrome 94

Features

What’s New in Chrome 94, Available Now (howtogeek.com)

Google Drive Files on the New Tab Page

The new card is called “From Your Google Drive” and it shows the three most recently opened documents and files.

Chrome 94 rolling out as first release in the new 4-week update cycle - 9to5Google

Dev Features

New in Chrome 94 - Chrome Developers

WebCodecs

The Web Codecs API makes it possible to use the media components and codecs that are already in the browser.

WebGPU

WebGPU is a new API that exposes modern graphics capabilities, specifically Direct3D 12, Metal, and Vulkan. You can think of it like WebGL, but it provides access to more advanced features of the GPU, and it also provides support for performing general computations on the GPU.

DevTools

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

Use DevTools in your preferred language

Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language!

Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools.

New CSS container queries badge

A new container badge is added next to the container elements (the ancestor elements that match the criteria of @container at-rules). Click the badge to toggle the display of an overlay of the chosen container and all its querying descendants on the page.

New checkbox to invert the network filters

Use the new Invert checkbox to invert the filters in the Network panel.

[rogerxu]

Chrome 95

Features

What’s New in Chrome 95, Available Now (howtogeek.com)

Save Tab Groups

Dev Features

New in Chrome 95 - Chrome Developers

Routing with URLPattern

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

const url = '/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);

Picking colors with the Eye Dropper API

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();

User-agent reduction origin trial

DevTools

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

New CSS length authoring tools

Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown.

Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally to increase or decrease the value. To adjust the value by 10, hold the Shift key when dragging.

Hide issues in the Issues tab

In the Issues tab, hover over on an issue you would like to hide. Click on More options > Hide issues like this.

Improved the display of properties

DevTools improve the display of properties by:

• Always bold and sort own properties first in the Console, Sources panel and Properties pane.
• Flatten the properties display in the Properties pane.

Sort snippets in the Sources panel

The snippets in the Snippets pane under the Sources panel are now sorted alphabetically. Previously, it’s not sorted.

Improved UI for DevTools command menu

[rogerxu]

Chrome 96

Features

[What’s New in Chrome 96, Available Now (howtogeek.com)](https://www.howtogeek.com/768637/whats-new-in-chrome-96/)

Faster Back and Forward Navigation

It’s using a new cache that [saves sites you recently visited](https://www.chromestatus.com/features/6279906713403392) on your computer. That way, when you go back or forward, they’ll be ready quicker. This will come at the cost of Chrome using even more RAM, but it may be worth it.

PNG Files Maintain Metadata

Chrome 96 fixes this behavior. PNG files you paste into Chrome will retain all the associated metadata.

Working on Dark Mode Per-Site

A new flag allows you to add exceptions for sites that you don’t want to display in dark mode.

Dev Features

[New in Chrome 96 - Chrome Developers](https://developer.chrome.com/blog/new-in-chrome-96/)

Manifest id for PWAs

URL protocol handlers for PWAs

Add a protocol_handlers property to your web app manifest, specify the protocol you want to handle, and the url that should be opened when clicked.

{
  "protocol_handlers": [
    {
      "protocol": "web+tea",
      "url": "/tea?type=%s"
    },
    {
      "protocol": "web+coffee",
      "url": "/coffee?type=%s"
    }
  ]
}

Priority hints (origin trial)

Priority Hints are an experimental feature, available as an origin trial starting in Chrome 96, and can help optimize the Core Web Vitals. The importance attribute allows you to specify the priority for resource types such as CSS, fonts, scripts, images, and iframes.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/not-important.svg" importance="low">

<!-- Initiate an early fetch for a resource, but de-prioritize it -->
<link rel="preload" href="/script.js" as="script" importance="low">

<script>
  fetch('https://example.com/', {importance: 'high'})
      .then(data => {
        // Trigger a high priority fetch
      });
</script>

DevTools

[What's New In DevTools (Chrome 96) - Chrome Developers](https://developer.chrome.com/blog/new-in-devtools-96/)

Preview feature: New CSS Overview panel

Use the new CSS Overview panel to identify potential CSS improvements on your page. Open the CSS Overview panel, then click on Capture overview to generate a report of your page’s CSS.

Restored and improved CSS length edit and copy experience

The copy CSS and edit as text experience are restored for CSS properties with length.

Rendering tab updates

Emulate the CSS prefers-contrast media feature

The prefers-contrast media feature is used to detect if the user has requested more or less contrast in the page.

Emulate the Chrome’s Auto Dark Theme feature

Use DevTools to emulate auto dark theme to easily see how your page looks when Chrome’s Auto Dark Theme is enabled.

Copy declarations as JavaScript in the Styles pane

Two new options are added in the context menu for you to easily copy CSS rules as JavaScript properties. These shortcuts options are handy especially for developers who are working with [CSS-in-JS](https://developer.chrome.com/blog/css-in-js/#what-is-css-in-js) libraries.

In the Styles pane, right click on a CSS rule. You can select Copy declaration as JS to copy a single rule or Copy all declarations as JS to copy all rules.

New Payload tab in the Network panel

Use the new Payload tab in the Network panel when you inspect a network request with payload.

Improved the display of properties in the Properties pane

The Properties pane now shows only relevant properties instead of showing all properties of the instance. DOM prototypes and methods are now removed.

Console updates

Option to hide CORS errors in the Console

You can hide CORS errors in the Console.

In the Console, click on the Settings icon and uncheck the Show CORS errors in console checkbox.

Proper [Intl](https://tc39.es/ecma402/#intl-object) objects preview and evaluation in the Console

The Intl objects have proper preview now and are evaluated eagerly in the Console.

Consistent async stack traces

The Console now reports async stack traces for async functions to be consistent with other async tasks, and consistent with what's shown in the Call Stack..