What's 開發人員工具的新功能 (Chrome 78)

Kayce Basques

「Audits」(稽核) 面板中的多重用戶端支援

您現在可以搭配使用「稽核」面板與其他開發人員工具功能，例如要求 封鎖和本機覆寫。

舉例來說，如果「稽核」面板報表顯示您的網頁成效分數為 70， 而主要的效能商機之一，就是排除會妨礙顯示的資源。

圖 1. 初始效能分數。

圖 2：初步報告指出有 3 個會妨礙顯示的指令碼發生問題。

「稽核」面板現在可與要求封鎖功能搭配使用，方便您快速 先封鎖 要求禁止轉譯指令碼：

圖 3. 透過「要求封鎖」分頁封鎖有問題的指令碼。

然後再次稽核頁面：

圖 4. 封鎖有問題的指令碼後，成效分數上升至 97 分。

或者，您也可以使用本機覆寫，在每個指令碼中加入 async 屬性 標記，但「我們會將它留做練習供讀者參考」。如要試用，請參閱多重客戶示範 。或是觀看這則推文，觀看示範影片。

Chromium 問題 #991906

付款處理常式偵錯

「應用程式」面板的「背景服務」部分現在支援付款處理常式 事件。

1. 前往「Application」面板。
2. 開啟「Payment Handler」窗格。

3. 按一下「錄製」。開發人員工具會將付款處理常式事件記錄 3 天，即使開發人員工具為 已打烊。

   

   圖 5. 記錄 Payment Handler 事件。

4. 如果您的 Payment Handler 事件發生在不同的網域，請啟用「顯示其他網域的事件」。 來源。

5. 觸發付款處理常式事件後，按一下事件的資料列即可進一步瞭解該事件。

   

   圖 6. 查看付款處理常式事件。

Chromium 問題 #980291

稽核面板中的 Lighthouse 5.2

「稽核」面板現在會執行 Lighthouse 5.2。新的「第三方使用情況」診斷工具 稽核功能會顯示要求第三方程式碼的數量，以及封鎖第三方程式碼的時間 載入網頁時的主要執行緒。詳情請參閱「最佳化第三方資源」一文 第三方程式碼如何降低負載效能。

圖 7. 「第三方使用情形」稽核。

Chromium 問題 #772558

「Performance」面板中的「Largest Contentful Paint」

在「效能」面板分析載入效能時，您會看到「時機」部分 包含 Largest Contentful Paint (LCP) 標記。LCP 會回報 大型內容元素會顯示在可視區域中。

圖 8：「時間」區段的 LCP 標記。

如要醒目顯示與 LCP 相關聯的 DOM 節點，請執行下列操作：

1. 在「時間」LCP部分按一下「LCP」LCP標記。

2. 將滑鼠遊標懸停在「摘要」分頁中的「相關節點」上，即可醒目顯示可視區域中的節點。

   

   圖 9：「Summary」分頁的「相關節點」區段。

3. 按一下相關節點，在「DOM 樹狀結構」中選取該節點。

透過主選單提交開發人員工具問題

如果您在開發人員工具中發現錯誤並想回報問題，或知道 如要改善開發人員工具，並想要求新功能，請前往「主選單」>說明 >檢舉 開發人員工具問題，以便在開發人員工具工程團隊的追蹤工具中建立問題。透過 在 Glitch 上以最少、可重現的範例呈現，大幅提高團隊解決問題的能力 請回報錯誤或實作功能要求！

說明 >回報開發人員工具問題。」width="800"高度：604">

圖 10：主選單 >說明 >回報開發人員工具問題。

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

與 Chrome 開發人員工具團隊聯絡

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

• 歡迎透過 crbug.com 提出建議或意見。
• 使用「更多選項」 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
• 前往 @ChromeDevTools 張貼 Tweet。
• 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。