Web 开发指向标 | Chrome 开发者工具学习资源 (五)

Chrome 开发者工具是一套 Web 开发者工具，直接内置于 Google Chrome 浏览器中，帮助您即时修改页面和快速诊断问题，让您能够更快地构建更好的网站。

• Chrome 开发者工具

  https://developer.chrome.google.cn/docs/devtools/ai-assistance?hl=zh-cn

• Google Chrome

  https://www.google.com/chrome/?hl=zh-cn

本篇文章我们为您带来 Chrome 141 版本更新内容，适用于 Android、ChromeOS、Linux、macOS 和 Windows 的 Chrome 141 稳定版渠道发布版本。您可以观看下方视频快速了解重要更新内容，也可以继续阅读获取详细更新内容。

在 Chrome 中遍历 window.getComputedStyle(element) 时会存在一个 bug，元素上自定义属性会被遗漏。因此，返回对象上的 length() 无法正确反映设置的自定义属性数量。此 bug 已在 Chrome 141 中修复，使 Chrome 得以与 Firefox 和 Safari 保持一致。

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5070655645155328

ariaNotify 提供了一个 JavaScript API，内容作者可以通过该 API 告知屏幕阅读器需要朗读的内容。

与 ARIA 实时区域相比，ariaNotify 提高了可靠性，并赋予开发者更大的控制权，允许播报与 DOM 更新无关的更改。这有助于在动态 Web 应用中实现更一致、更符合人体工程学的无障碍体验。此功能在 Iframe 中的使用可以通过 "aria-notify" 权限策略来控制。

• 跟踪 bug #326277796

  https://issues.chromium.org/issues/326277796

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5745430754230272

该规范最近对 hidden=until-found 和 details 元素的显示算法进行了一些微调，以防止浏览器陷入无限循环，这些更改现已在 Chrome 中发布。

• 跟踪 bug #433545121

  https://issues.chromium.org/issues/433545121

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5179013869993984

RTP 统计信息对象 (在此特指 "outbound-rtp" 或 "inbound-rtp" 类型) 表示一个 WebRTC 流。该流使用 SSRC (数字类型) 作为其唯一标识符。此功能在统计信息的创建时机方面，与规范保持一致。

• 跟踪 bug #406585888

  https://issues.chromium.org/issues/406585888

• ChromeStatus.com 条目

  https://chromestatus.com/feature/4580748730040320

restrictOwnAudio 属性是捕获显示界面的可约束属性。它会更改捕获的显示界面中系统音频的处理方式。 仅当捕捉的显示界面本身包含系统音频时，restrictOwnAudio 约束才会生效；否则，它不会产生任何影响。

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5128140732760064

通过 windowAudio 选项扩展 getDisplayMedia() 的 DisplayMediaStreamOptions。借助此新选项，Web 应用可以向用户代理提示，在选择窗口时是否应向用户提供共享音频的功能。windowAudio 可以根据应用偏好设置为 "exclude (排除)"、"system (系统)" 或 "window (窗口)"。

如果某个 Web 应用已配置音频捕获功能，但希望在选择窗口时限制系统音频捕获，则应设置为 windowAudio: "exclude"。

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5072779506089984

此功能支持通过 SVG 标记和 CSS 将 width 和 height 应用为嵌套 <svg> 元素上的展示属性。这种双重方法为开发者提供了更大的灵活性，使他们能够在复杂的设计中更高效地管理和设置 SVG 元素的样式。

• 跟踪 bug #40409865

  https://issues.chromium.org/issues/40409865

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5178789386256384

网站使用各种机制 (例如自定义 URL 协议和二维码扫描) 从移动钱包应用中检索凭据。此功能可让网站使用 Android 的 IdentityCredential CredMan 系统从钱包请求身份信息。它可扩展以支持多种凭据格式 (例如 ISO mDoc 和 W3C 可验证凭据)，并允许使用多个钱包应用。此更新添加了相关机制，有助于降低大规模滥用真实世界身份的风险。

• 跟踪 bug #40257092

  https://issues.chromium.org/issues/40257092

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5166035265650688

通常，当调用 navigateEvent.intercept() 时，被拦截的导航会在 NavigateEvent 完成调度后立即提交 (因此 URL 也会更新)。

此功能向 navigateEvent.intercept() 添加了 precommitHandler 选项，类似于 handler。它会延迟提交，直到该处理程序 (以及所有其他预提交处理程序) 解析完成，并且允许处理程序更改导航的 URL、信息、状态和历史记录处理行为 (推送/替换)。

• 跟踪 bug #440190720

  https://issues.chromium.org/issues/440190720

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5134734612496384

除了用户的全名和电子邮件地址之外，现在还支持使用电话号码和用户名作为标识符，以便在账号选择器中区分账号。此外，网站还可以利用这些新的字段来定制用户隐私披露文本的内容。

• 跟踪 bug #382086282

  https://issues.chromium.org/issues/382086282

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5121180773908480

允许 HTTP 磁盘缓存使用 No-Vary-Search 响应标头在仅查询参数不同的 URL 之间共享缓存条目。

开发者可以使用 No-Vary-Search 指定对用户体验没有影响的查询参数。一个常见的示例是用于跟踪转化的 ID。在 HTTP 磁盘缓存中支持此标头意味着，如果用户稍后在没有转化 ID 的情况下浏览同一网页，则可以从缓存中使用或重新验证该网页，而无需从网络中重新完整获取。

之前，No-Vary-Search 支持已随导航预提取缓存、预提取和预渲染推测规则以及预渲染一起发布。本次更新则使其能广泛应用于所有依赖 HTTP 磁盘缓存的功能。

• 跟踪 bug #382394774

  https://issues.chromium.org/issues/382394774

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5808599110254592

此功能向 IndexedDB IDBObjectStore 和 IDBIndex 添加了 getAllRecords() 方法。此外还向 getAll() 和 getAllKeys() 添加了方向参数。与传统的使用游标进行迭代的方式相比，此功能可显著加快某些读取模式的速度。在一项测试中，来自 Microsoft 媒体资源的工作负载显示性能提升了 350 毫秒。

getAllRecords() 方法通过同时枚举主键和值来组合 getAllKeys() 和 getAll()。对于 IDBIndex 来说，getAllRecords() 除了提供主键和值之外，还可以提供记录的索引键。

• 跟踪 bug #40746016

  https://issues.chromium.org/issues/40746016

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5124331450138624

在桌面端，现在的 "eager" 积极程度推测规则会在用户悬停在链接上的时间短于 "moderate" 鼠标悬停时间时，触发预提取和预渲染。

此前，触发预提取和预渲染的行为与 "immediate" 程度相同，这一调整能更准确地体现开发者希望加载速度介于 moderate 和 immediate 之间的意图。

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5113430155591680

调整 Storage Access API 语义，以严格遵循有关安全性的同源策略。也就是说，在框架中使用 document.requestStorageAccess() 默认只会将 Cookie 附加到对 iframe 源 (而非网站) 的请求中。

注意: 您仍可使用 CookiesAllowedForUrls 策略或存储访问标头来解除对跨站点 Cookie 的屏蔽。

• 跟踪 bug #379030052

  https://issues.chromium.org/issues/379030052

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5169937372676096

此功能为 Web 开发者提供了一种验证其依赖资源来源的机制，从而为站点依赖项的信任奠定技术基础。简而言之: 服务器可以使用 Ed25519 密钥对为响应签名，而 Web 开发者可以要求用户代理使用特定公钥验证签名。这在一定程度上有效地补充了现有机制: 一是由内容安全策略提供的基于 URL 的检查，二是由子资源完整性提供的基于内容的检查。

• 跟踪 bug #375224898

  https://issues.chromium.org/issues/375224898

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5032324620877824

此 API 允许对通过 RTCPeerConnection 传输的编码媒体进行处理。Chrome 于 2020 年发布了此 API 的早期版本。此后相关技术规范发生了变更，其他浏览器也发布了更新版本 (Safari 在 2022 年，Firefox 在 2023 年)。本次更新使 Chrome 与最新的规范保持一致，这也是 Interop 2025 工作的一部分。

本次发布并未包含 generateKeyFrame 方法，该方法目前仍在讨论阶段。

• 跟踪 bug #354881878

  https://issues.chromium.org/issues/354881878

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5175278159265792

扩展了 MediaTrackConstraints 字典的 echoCancellation 行为。它之前接受 true 或 false，现在还接受值 "all" 和 "remote-only"。这使得客户端能够调整应用于麦克风音轨的回声消除行为，从而控制从麦克风信号中移除来自用户系统播放的音频数量 (全部或仅从 PeerConnections 接收的音频)。

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5585747985563648

新的权限策略可用于限制对设备属性 API 的访问权限，该 API 仅适用于策略安装的 kiosk Web 应用和策略安装的隔离式 Web 应用，且仅在受管理的 ChromeOS 设备上可用。

此外，该功能还受内容设置控制。我们推出了两项新策略: DeviceAttributesBlockedForOrigins 和 DefaultDeviceAttributesSetting，以补充之前推出的 DeviceAttributesAllowedForOrigins。对于受管理的 ChromeOS 设备上通过策略安装的 kiosk Web 应用和通过策略安装的隔离式 Web 应用 (IWA)，此功能默认处于启用状态。

• ChromeStatus.com 条目

  https://chromestatus.com/feature/4843520522977280

Chrome 141 限制了向用户本地网络发起请求的能力，此功能现在需要通过权限提示框进行授权管理。

此试验功能暂时允许从不安全的环境访问本地网络上的资源。这样一来，开发者就有更多时间将本地网络访问权限请求迁移到安全的环境中。

• 限制了向用户本地网络发起请求的能力

  https://developer.chrome.google.cn/blog/local-network-access?hl=zh-cn

• 跟踪 bug #394009026

  https://issues.chromium.org/issues/394009026

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5152728072060928

一个基于 AI 语言模型支持的 JavaScript API，用于校对输入文本并提供建议的更正。

• 校对输入文本并提供建议的更正

  https://developer.chrome.google.cn/blog/proofreader-api-ot?hl=zh-cn

• 跟踪 bug #403313556

  https://issues.chromium.org/issues/403313556

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5164677291835392

此功能为 script-src 内容安全政策 (CSP) 指令添加了新关键字。这新增了两种基于哈希的允许清单机制: 基于 URL 哈希的脚本源，以及 eval() 和类似 eval() 函数内容的哈希值。此功能有时称为 script-src-v2，但它与现有的 script-src 向前兼容，并使用相同的指令。

通过将哈希验证扩展到 URL 和 eval()，即使脚本内容经常发生变化，开发者仍然可以通过哈希值严格地将脚本列入允许清单，从而指定合理且严格的安全策略，以及允许使用已知安全的 eval() 内容，而无需广泛允许未经检查的 eval() 使用。

如果提供了新关键字，则会替换基于主机的 script-src。这样一来，单个标头便可同时兼容实现或未实现新关键字的浏览器。

• 跟踪 bug #392657736

  https://issues.chromium.org/issues/392657736

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5196368819519488

使 WebAssembly 能够在新的 "自定义描述符" 对象中，更高效地存储与源码级类型相关联的数据。这些自定义描述符可以为该源码级类型的 WebAssembly 对象配置原型。这使您可以在 WebAssembly 对象的原型链上 "安装" 方法，并使用正常的函数调用语法直接从 JavaScript 调用。原型和方法可以使用导入的内建函数，以声明式的方式进行配置。

• ChromeStatus.com 条目

  https://chromestatus.com/feature/6024844719947776

现在使用 Sec-Purpose 标头进行预提取和预渲染，我们将移除旧版 Purpose: prefetch 请求标头。通过 feature flag / kill switch 来控制可以防止出现兼容性问题。

这主要针对推测规则预提取、推测规则预渲染和 Chromium 的非标准。

• 跟踪 bug #420724819

  https://issues.chromium.org/issues/420724819

• ChromeStatus.com 条目

  https://chromestatus.com/feature/5088012836536320

想了解更多 Chrome 开发者工具的实用技巧吗？请持续关注我们的系列文章，敬请期待更多精彩内容！