Chrome 116 的新变化

Adriana Jara

以下是您有必要知道的信息：

我是 Adriana Jara。我们来深入了解下，看看 Chrome 116 会为开发者带来哪些新变化。

Document Picture-in-Picture API。

通过 Document Picture-in-Picture API，你可以打开一个始终开启的窗口，其中可以填充任意 HTML 内容。

正在播放 Sintel 预告片视频的画中画窗口。
使用 Document Picture-in-Picture API 创建的画中画窗口（演示）。

Document Picture-in-Picture API 中的“画中画”窗口类似于使用 window.open() 打开的空白同源窗口，但存在一些差异：

  • “画中画”窗口悬浮在其他窗口之上。
  • 画中画窗口的存在时间绝不会超过打开的窗口。
  • 无法浏览“画中画”窗口。
  • 网站无法设置画中画窗口位置。

以下 HTML 设置了一个自定义视频播放器和一个按钮元素，以便在画中画窗口中打开该视频播放器。

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

当用户点击该按钮以打开空白的画中画窗口时，以下 JavaScript 会调用 documentPictureInPicture.requestWindow()。返回的 promise 通过画中画窗口 JavaScript 对象进行解析。使用 append() 将视频播放器移至该窗口。

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);
});

如需了解更多详情和示例，请查看任意元素的画中画功能。

开发者工具缺少样式表调试方面的改进。

开发者工具进行了多项改进，可以识别和调试缺少样式表的问题。

首先：为尽量避免混淆，来源 > 网页树现在仅显示已成功部署和加载的样式表。

此外，Sources > Editor 现在会在失败的、@import、url() 和 href 语句旁边显示下划线并显示内嵌错误提示。

在“Sources”面板中，带下划线的语句和提示。

  • 除了指向失败请求的链接之外，控制台现在还提供指向引用了未能加载的样式表的确切行的链接。

控制台会提供指向存在问题的语句的确切行的链接。

“Network”面板始终会使用指向引用了未能加载的样式表的确切行的链接来填充 Initiator 列。

“问题”面板会列出所有样式表加载问题，包括网址损坏、失败的请求和放错位置的 @import 语句。

“问题”面板，其中包含指向来源和请求的链接。

如需详细了解 Chrome 116 中的开发者工具，请查看开发者工具的新变化。

还有更多其他奖励！

当然还有许多其他功能。

  • 动画路径允许作者沿着开发者指定的路径放置任何图形对象，并为其添加动画效果。
  • 关键帧动画现在支持 display 和 content-visibility 属性，这允许完全在 CSS 中添加退出动画。
  • 现在，Fetch API 可与自带缓冲区读取器一起使用，从而减少垃圾回收开销和副本，并提高对用户的响应速度。

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 116 中的其他变化，请点击以下链接。

订阅

如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

嗨，Adriana Jara！Chrome 117 发布后，我会在这里 告诉大家 Chrome 的新功能！