Google Chrome What's New - 110+

[rogerxu]

Chrome 110

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

Features

Password Manager Improvements

You can use a biometric method to confirm your identity before the browser autofills a password.

Better Google Translate Controls

You can go to chrome://settings/languages and choose a default language, set languages to auto-translate, and choose languages to never translate.

Nvidia RTX Super Resolution Support

Nvidia RTX Video Super Resolution is a tool that can upscale video playing in a browser. For example, if you have a 4K computer display, it can upscale a video from 1080p to 4K directly in the web player.

This only works with Nvidia RTX graphic cards, specifically the newer RTX 3000 and RTX 4000 series models.

More Enhanced “Enhanced Safe Browsing”

Chrome 110 enhances "Enhanced Safe Browsing" even more with the ability to analyze cookie requests from extensions to better spot malware.

Dev Features

New in Chrome 110 - Chrome Developers

:picture-in-picture pseudo class

You can add styles to the elements to improve the experience.

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

launch_handler manifest member

In desktop environments, if you install an app and then visit it on the browser, there is a button to move to the standalone app window.

Now, using the launch_handler manifest member web apps can customize their launch behavior.

{
  "launch_handler": {
    "client_mode": "navigate-new"
  }
}

credentialless iframes

The credentialless attribute helps to embed third-party iframes that don't set COEP and CORP headers.

With credentialless, the iframe is loaded from a different, empty context. In particular, it is loaded without cookies. The iframe starts with an empty cookie jar.

Likewise, storage APIs such as LocalStorage, CacheStorage, and so on, load and store data in the new ephemeral partition. All this storage is cleared once the top-level document is unloaded. This allows for removing the COEP restriction.

CSS initial-letter property

The CSS initial-letter property provides a way to set the number of lines that an initial-letter should sink into following lines of text.

DevTools

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

Clearing Performance Panel on reload

The Performance panel now clears both the screenshot and trace when you click the Start profiling and reload page button.

Recorder updates

View and highlight the code of your user flow in the Recorder

The Recorder now offers split code view, making it easier to view your user flow code. To access the code view, open a user flow and click Show Code.

Customize selector types of a recording

You can create recordings that capture only the selector types that matter to you. With the new option to customize selector types when creating a new recording, you can include or exclude selectors such as XPath, ensuring you capture only the selectors you want in your user flows.

Edit user flow while recording

The Recorder now allows editing during recording, providing you with the flexibility to make changes in real-time. You no longer need to end the recording to make adjustments.

Automatic in-place pretty print

The Sources panel now automatically pretty prints minified source files in place. You can click on the pretty print button { } to undo it.

Better syntax highlight and inline preview for Vue, SCSS and more

The Sources panel enhanced the syntax highlighting for several widely-used file formats, enabling you to read code more easily and recognize its structure, including Vue, JSX, Dart, LESS, SCSS, SASS, and inline CSS.

DevTools also improved the inline preview for Vue, inline HTML, and TSX. Hover over a variable to preview its value.

DevTools now shows the sourcemap of a stylesheet in the Sources panel. For instance, when you open a SCSS file, you can access the related CSS file by clicking on the sourcemap link.

Ergonomic and consistent Autocomplete in the Console

DevTools enhances the autocompletion experience by implementing the following changes:

• ⇥ is always used for autocompletion.
• The behavior of → and ⏎ varies based on context.
• The autocompletion experience is consistent across text editors, in the Console, Sources, and Elements panels

[rogerxu]

Chrome 111

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

Features

Revoke Permissions From Forgotten Websites

Expanded Picture-in-Picture Functionality

Chrome Developers

Chrome 111 is testing a new Document Picture-in-Picture API that enables developers to open a PiP window that can be filled with any desired HTML content—like a Pomodoro timer—not just videos.

Dev Features

New in Chrome 111 - Chrome Developers

View Transitions API

The View Transitions API is here to make the creation of polished transitions simpler by snapshotting views and allowing the DOM to change without any overlap between states.

CSS Color Level 4

With CSS color level 4, CSS now supports high definition displays, specifying colors from HD gamuts while also offering color spaces with specializations.

DevTools

What's New in DevTools (Chrome 111) - Chrome Developers

Debugging HD color with the Styles pane

The Styles pane now supports 12 new color spaces and 7 new gamuts as outlined in the CSS Color Level 4 specification.

Here are examples of CSS color definitions with color(), lch(), oklab() and color-mix().

When using the color-mix() function, you can view the final color output in the Computed pane.

The color picker supports all the new color spaces with more features. For example, click on the color swatch of color(display-p3 1 0 1). A gamut boundary line has also been added, distinguishing between the sRGB and display-p3 gamuts for a clearer understanding of your selected color's gamut.

DevTools supports converting colors between color formats. Use the Change Color Format icon to access the conversion popup, or simply use the Shift + click on a color swatch in the Styles pane.

When converting, it's important to know if the conversion was clipped to fit the space. DevTools puts a warning icon next to the converted color that alerts you to this clipping.

In addition, you can pick colors from your screen with the new shortcut. Press 'c' to activate the eye dropper and hit Escape to deactivate it. The eyedropper tool only samples colors in the sRGB color space. For example, if you try to sample the color color(display-p3 1 0 1), which is outside of the sRGB color space, the eyedropper tool will clip the color to the nearest color in the sRGB space, which is magenta color(display-p3 0.92 0.2 0.97).

Enhanced breakpoint UX

• Both pause exception options moved to the Breakpoints pane and labeled with text to make it more self-explanatory.
• Breakpoints are grouped by file, ordered by line or column numbers, and are collapsible.
• There are new options to deactivate, remove, and edit breakpoints when hovering over a breakpoint or file.
• Click the edit breakpoint button to open the breakpoint editor. From here, you can enter the breakpoint condition or switch to a logpoint.

Better syntax highlight for Angular

DevTools enhanced the syntax highlighting for Angular HTML templates, making it easier for you to read code and recognize its structure.

Reorganize caches in the Application panel

The Cache Storage pane can now be found in the Storage section of the Application panel, while the Back/forward cache pane has been moved to the Background Services section.

[rogerxu]

Chrome 112

Dev Features

New in Chrome 112 - Chrome Developers

CSS now supports nesting rules

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

Algorithm update for <dialog> initial focus

The dialog focusing steps look at keyboard focusable elements instead of any focusable element The <dialog> element itself gets focus if it has the autofocus attribute set

Skipping service worker no-op fetch handlers

The service worker start and the listener dispatch from the navigation critical path will be omitted, if a user agent identifies that all the service worker's fetch listeners are no-ops.

DevTools

What's New in DevTools (Chrome 112) - Chrome Developers

Replay extensions support

The Recorder introduces support for custom replay options that you can embed into DevTools with an extension.

Record with pierce selectors

Start a new recording on a page with shadow DOM and check Pierce in Selector types to record.

Export as a Puppeteer script with Lighthouse analysis

The Recorder introduces a new export option: Puppeteer (including Lighthouse analysis).

CSS documentation

How many times a day do you look up documentation on CSS properties? The Elements > Styles pane now shows you a short description when you hover over a property.

Marking logpoints and conditional breakpoints in the Console

Further improving the enhanced breakpoint UX, the Console now marks messages triggered by breakpoints:

Ignore irrelevant scripts during debugging

To help you focus on the most important parts of your code, you can now add irrelevant scripts to the Ignore List right from the file tree on the Sources > Page pane.

[rogerxu]

Chrome 113

Google Chrome 113 Is Now Available to Download (howtogeek.com)

Dev Features

New in Chrome 113 - Chrome Developers

WebGPU

WebGPU allows high-performance 3D graphics and data-parallel computation on the web.

First-Party Sets

First Party Sets is part of the Privacy Sandbox. It is a way for organizations to declare relationships among sites, so that browsers allow limited third-party cookie access for specific purposes.

DevTools

What's New in DevTools (Chrome 113) - Chrome Developers

Override network response headers

To override a header, navigate to Network > Headers > Response Headers, hover over a header's value, click and edit it.

To edit all overrides in a single place, edit the .headers file in Sources > Overrides. There, you can also click Add override rule to override multiple requests using wildcards (*).

Invalid CSS properties and values

To help you diagnose CSS issues faster, the Styles pane now crosses out:

• An entire CSS declaration (property and value) when the CSS property is invalid.
• Just the value when the CSS property is valid but the value is invalid.

New Console setting: Autocomplete on Enter

Starting with the previous version (112), you can configure the DevTools Console to apply an autocomplete suggestion when you press Enter.

By default, to accept an autocomplete suggestion, you can press Tab or Arrow right. To also autocomplete with Enter, enable Settings > Console > Accept autocomplete suggestion on Enter.

[rogerxu]

Chrome 114

Google Chrome 114 Arrives With New Reading Mode (howtogeek.com)

Features

New Reading Mode

This update includes a new Reading Mode, which appears as a new dropdown menu option in Chrome’s sidebar. When you select it, a simplified version of the current page is displayed in the sidebar, with options to change the background, text colors, font, and line size for easier reading.

Dev Features

New in Chrome 114 - Chrome Developers

text-wrap:balance

Use text-wrap: balance to improve text layouts.

CHIPS: Cookies Having Independent Partitioned State

CHIPS (Cookies Having Independent Partitioned State), enables opting-in to third-party cookies being partitioned by top-level site using the new cookie attribute Partitioned.

With CHIPS when a user visits site A and embedded content from site C sets a cookie with the Partitioned attribute, the cookie is saved in a partitioned jar only for cookies that site C sets when it's embedded on site A. The browser would only send that cookie when the top-level site is A.

The Popover API

With the Popover API it is easier to build transient user interface (UI) elements that are displayed on top of all other web app UI.

This is similar to the <dialog> element, but has several important differences, including light-dismiss behavior, popover interaction management, and event support, and the lack of a "modal" mode.

DevTools

What's New in DevTools (Chrome 114) - Chrome Developers

WebAssembly debugging support

DevTools enables Settings > Experiments > WebAssembly Debugging: Enable DWARF support by default.

Debug Autofill using the Elements panel and Issues tab

To check out this feature, enable Settings > Experiments > Highlights a violating node or attribute in the Elements panel DOM tree and inspect this demo page.

Hover over a highlighted issue in the DOM tree and click View issue to open the Issues tab that lists all detected issues and provides clues on what went wrong.

Assertions in Recorder

To add an assertion, start a new recording, interact with your page, and click Add assertion.

[rogerxu]

Chrome 115

Google Chrome 115 Is Here, but You Might Not Like It (howtogeek.com)

Dev Features

New in Chrome 115 - Chrome Developers

Scroll driven animations

The Scroll-driven Animations Specification defines two new types of timelines that you can use:

• Scroll Progress Timeline: a timeline that is linked to the scroll position of a scroll container along a particular axis.
• View Progress Timeline: a timeline that is linked to the relative position of a particular element within its scroll container.

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

Fenced Frames

A fenced frame is a HTML element for embedded content, similar to an iframe. Unlike iframes, a fenced frame limits communication with its embedding context to allow the frame access to cross-site data without sharing it with the embedding context.

Topics API

The Topics API allows a browser to share information with third parties about a user's interests while preserving privacy.

DevTools

What's New in DevTools (Chrome 115) - Chrome Developers

New CSS subgrid badge

The Elements panel gets a new subgrid badge for subgrid.

Selector specificity in tooltips

In Elements > Styles, hover over a selector name to see its specificity weight in a tooltip.

Values of custom CSS properties in tooltips

In Elements > Styles, hover over a custom CSS property name to see its value in a tooltip.

CSS syntax highlighting

The Sources panel gets the following for preprocessed CSS files, such as SASS, SCSS, and LESS:

• Syntax highlighting.
• Inline editors support. These editors are similar to those in Elements > Styles, for example, Color Picker and Easing Editor.

[rogerxu]

Chrome 116

Google Chrome 116 Arrives With One-Time Permissions (howtogeek.com)

Dev Features

New in Chrome 116 - Chrome Developers

Document Picture-in-Picture API

The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content.

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

DevTools

What's New in DevTools (Chrome 116) - Chrome Developers

Improved debugging of missing stylesheets

Storage buckets support and metadata view

The Application > Storage section gets storage buckets support. Storage buckets are independent from each other, so you can specify eviction prioritization for slices of data and make sure the most valuable data doesn't get deleted. Each storage bucket can store data associated with established storage APIs such as IndexedDB and CacheStorage.

[rogerxu]

Chrome 117

Dev Features

New in Chrome 117 - Chrome for Developers

New CSS features for entry and exit animations

transition-behavior

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

@starting-style rule

/*  0. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  1. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

overlay property

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Array grouping

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

DevTools

What's New in DevTools (Chrome 117) - Chrome for Developers

Override web content locally

To override web content, open the Network panel, right-click a request, and select Override content.

If you have local overrides set up but disabled, DevTools enables them. If you haven't set them up yet, DevTools prompts you in the action bar at the top. Select a folder to store the overrides in and allow DevTools access to it.

Once the overrides are set up, DevTools then takes you to Sources > Overrides > Editor to let you override web content.

The overridden resources are indicated with in the Network panel. Hover over the icon to see what's overridden.

Override the content of XHR and fetch requests

DevTools currently supports content overrides for the following request types: images (for example, avif, png), fonts, fetch and XHR, scripts (css and js), and documents (html). DevTools now grays out the Override content option for unsupported types.

Hide Chrome extension requests

To filter out all the requests sent to chrome-extension:// URLs, check Hide extension URLs.

Human-readable HTTP status codes

The Status Code in the request's header now shows human-readable text next to the HTTP status codes, so you can figure out what happened to the request quicker.

Pretty-print responses for JSON subtypes

The Response tab of for a request with a application/[subtype]+json MIME subtype (for example, ld+json, hal+json, and others) now parses the response correctly and lets you prettify it.

Performance: See the changes in fetch priority for network events

The Performance panel now shows two priority fields in the Summary of an event in the Network track: Initial Priority and (final) Priority, instead of just the singe Priority. With this additional field you can now see if the event's fetch priority changes and tweak the order of downloads.

Additionally, you can find the same information in the Priority column of the Network panel, with the Big request rows setting enabled.

Sources settings enabled by default: Code folding and automatic file reveal

The Settings > Preferences > Code folding option is now enabled by default. This option lets you fold code blocks.

To fold a code block, hover over the line number next to the start of the block and click the collapse icon. Click {...} to expand the block again.

Moreover, the Settings > Preferences > Automatically reveal files in the sidebar is now also enabled by default.

This setting makes the file tree in the Sources > Page select the current file open in the Editor when you switch tabs.

Improved debugging of third-party cookie issues

You can already test how Chrome behaves after the third-party cookie phaseout. To do this, run Chrome from the command line with the --test-third-party-cookies-phaseout flag.

Regardless of the way you run Chrome (with or without the flag), the Issues tab now has the Include third-party cookie issues checkbox enabled by default for all new Chrome users and, as a result, reports:

• A breaking change warning about the upcoming phaseout.
• Issues related to third-party cookies.

Additionally, the Blocked response cookies filter in the Network panel has been rephrased to make it clear that it shows only the blocked response cookies.

Debug preloading in the Application panel

DevTools adds the Preloading section to the Application panel.

• Speculation Rules that lists all the rule sets found on the current page.
• Preloads that lists all the prefetched and prerendered URLs from the rule sets.
• This Page that lists the prerendered status of the current page.

[rogerxu]

Chrome 118

Dev Features

New in Chrome 118 - Chrome for Developers

CSS @scope rule

@scope (.pink-theme) {
    a {
        color: hotpink;
    }
}

@scope (.lightpink-theme) {
    a {
        color: lightpink;
    }
}

We could apply style to the text and exclude controls or vice versa.

@scope (.component) to (.click-here, .link-here) {
    div {
        color: purple;
        text-align: center;
        font-family: sans-serif;
    }
}

scripting media features

Using the scripting media feature you can detect if scripting is available and apply particular styles for each case, the available values are: enabled, initial-only or none

@media (scripting: none) {
    .script-none {
        color: red;
    }
}

DevTools

What's New in DevTools (Chrome 118) - Chrome for Developers

New section for custom properties in Elements > Styles

The Elements panel now supports the @property CSS at-rule.

Local overrides

The Network panel gets a new Has overrides column and a corresponding has-overrides:[content|headers|yes|no] filter.

Enhanced search

Search results now show an entry per all the matches it found in a line of code.

Streamlined workspace in the Sources panel

The Sources > Filesystem pane was renamed into Workspace.

Reorder panes in Sources

You can now reorder panes on the left side of the Sources panel by dragging and dropping.

Syntax highlighting and pretty-printing for more script types

• Pretty-print inline JavaScript within the following script types: module, importmap, speculationrules.
• Highlight the syntax of importmap and speculationrules script types, both of which hold JSON.

Emulate prefers-reduced-transparency media feature

prefers-reduced-transparency which lets developers adapt web content to user-selected preference for reduced transparency in the OS, such as the Reduce transparency setting on macOS. Valid options are reduce or no-preference.

To emulate this media feature, open the Rendering tab and scroll down to it.

.translucent {
    opacity: 0.4;
}

@media (prefers-reduced-transparency) {
    .translucent {
        opacity: 0.8;
    }
}

[rogerxu]

Chrome 119

Dev Features

New in Chrome 119 - Chrome for Developers

CSS :user-invalid and :user-valid

The pseudo-classes that represent an element with incorrect or correct input, respectively, but only after the user has significantly interacted with it.

Relative color syntax

The oklab(from magenta calc(l * 0.8) a b); results in an Oklab magenta that is 80% lighter.

clip-path supports more values

The <geometry-box> values to control the clip's reference box, making clip-path easier to use.

The functions xywh() and rect() that make it easier to specify rectangular or rounded-rectangular clips.

DevTools

What's New in DevTools (Chrome 119) - Chrome for Developers

Editable @property rule

You can now edit the @property CSS at-rule in the corresponding section in the Elements > Styles pane.

Pretty-print inline JSON in script tags in Sources

The Sources panel now supports pretty-printing inline JSON in <script> HTML tags for easier debugging.

Autocomplete private fields in Console

You can now autocomplete private class fields when evaluating them outside the class scope in the Console.