以下是一些注意事項：
- 使用 Document Picture in Picture API 提升使用者工作效率。
- 現在更容易在開發人員工具中對缺少的樣式表進行偵錯
- 還有不少更多應用程式。
我是 Adriana Jara我們來深入說明 Chrome 116 為開發人員推出的新功能。
Document Picture-in-Picture API。
Document Picture-in-Picture API 可讓您開啟可填入任意 HTML 內容的「一律開啟」視窗。
文件子母畫面 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()。傳回的承諾會以「子母畫面」視窗 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 陳述式加上底線，並顯示內嵌錯誤工具提示。
- 除了指向失敗要求的連結外，控制台現在還提供參照無法載入的樣式表的確切行連結。
「網路面板」會持續在 「Initiator」欄中填入相關連結，指向參照無法載入的樣式表的確切行。
問題面板會列出所有樣式表載入問題，包括無效網址、要求失敗和錯置的 @import 陳述式。
歡迎查看 Chrome 116 版中的 開發人員工具新功能，瞭解所有詳細資訊和更多相關資訊。
還有更多獎品等著您！
當然還有許多其他事物。
- 動態路徑可讓作者定位任何圖形物件，並依照開發人員指定的路徑製作動畫。
- 主要畫面格動畫現在支援
display和content-visibility屬性，後者可讓您在 CSS 中單獨加入離開動畫。 - 擷取 API 現在可以與自備緩衝區讀取器搭配使用，進而降低垃圾收集的負擔和複製作業量，並改善使用者的回應體驗。
其他資訊
以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 116 的其他變更，請點選下方連結。
- Chrome 開發人員工具新功能 (116)
- Chrome 116 淘汰和移除
- 適用於 Chrome 116 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊，請訂閱 Chrome Developers YouTube 頻道，每當我們推出新影片時，您就會收到電子郵件通知。
而 Yo soy Adriana Jara，而且 Chrome 117 推出後，我將立刻告訴大家 Chrome 有哪些新功能！