Chrome 116 版新功能

Adriana Jara

以下是一些注意事項：

我是 Adriana Jara。讓我們一起來看看 Chrome 116 為開發人員帶來哪些新功能。

文件子母畫面 API。

有了 Document Picture-in-Picture API，您就能開啟一律置頂的視窗，並在其中填入任意 HTML 內容。

播放 Sintel 預告片的子母畫面視窗。
使用 Document Picture-in-Picture API 建立的 Picture-in-Picture 視窗 (示範)。

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>

當使用者點選按鈕開啟空白的 Picture-in-Picture 視窗時，下列 JavaScript 會呼叫 documentPictureInPicture.requestWindow()。傳回的承諾會使用子母畫面視窗 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」>「Page」樹狀結構現在只會顯示已成功部署及載入的樣式表，以減少混淆。

此外，「來源」>「編輯器」現在會在失敗、@import、url() 和 href 陳述式旁邊加上底線，並顯示內嵌錯誤工具提示。

「來源」面板中含有工具提示的底線陳述式。

  • 除了失敗要求的連結外，控制台現在也提供整行連結，方便您查看參照無法載入的樣式表的確切連結。

主控台會提供有問題陳述式的確切行號連結。

「Network」面板會持續在「Initiator」欄中填入連結，連結會指向參照無法載入的樣式表的確切行。

「Issues」面板會列出所有樣式表單載入問題，包括無效網址、失敗的請求，以及放錯位置的 @import 陳述式。

「Issues」面板，內含來源和要求的連結。

如要瞭解 Chrome 116 版中的開發人員工具和詳細資訊，請查看開發人員工具的新功能。

還有更多獎品等著您！

當然，還有許多其他功能。

  • 動畫路徑可讓作者為任何圖形物件指定位置，並沿著開發人員指定的路徑製作動畫。
  • 主要畫面格動畫現在支援 display 和 content-visibility 屬性，可以只用 CSS 加入結束動畫。
  • 擷取 API 現在可搭配Bring Your Own Buffer readers 使用，減少垃圾收集額外負擔和副本，並改善使用者的回應速度。

延伸閱讀

這只涵蓋部分重要亮點。請參閱下方連結，瞭解 Chrome 116 中的其他變更。

訂閱

如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。

我是 Adriana Jara，Chrome 117 一推出，我就會在這裡告訴你 Chrome 有哪些新功能！