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

Kayce Basques

稽核面板支援多個用戶端

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

舉例來說，假設「稽核」面板報表顯示網頁的效能分數為 70 分，而消除會阻礙算繪的資源是您最大的效能改善機會。

圖 1. 初始成效分數。

圖 2. 初步報告指出有 3 個會阻礙算繪的指令碼是問題所在。

現在「稽核」面板可與要求封鎖功能搭配使用，因此您可以先封鎖算繪封鎖指令碼的要求，快速評估算繪封鎖指令碼對載入效能的影響程度：

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

然後再次稽核網頁：

圖 4. 封鎖有問題的指令碼後，「效能」分數提升至 97 分。

您也可以使用「本機覆寫」，為每個指令碼標記新增 async 屬性，但「我們將把這項練習留給讀者」。如需影片示範，請參閱這則推文。

Chromium 問題 #991906

偵錯付款處理常式

「Application」面板的「Background Services」部分現在支援「Payment Handler」事件。

1. 前往「應用程式」面板。
2. 開啟「付款處理常式」窗格。

3. 按一下「錄音」。開發人員工具會記錄付款處理常式事件 3 天，即使處於關閉狀態也仍會持續記錄。

   

   圖 5. 記錄付款處理常式事件。

4. 如果付款處理常式事件發生在其他來源，請啟用「顯示其他網域的事件」。

5. 觸發 Payment Handler 事件後，按一下事件資料列即可瞭解詳情。

   

   圖 6. 查看 Payment Handler 事件。

Chromium 問題 #980291

「稽核」面板中的 Lighthouse 5.2

「稽核」面板現在會執行 Lighthouse 5.2。新的「第三方使用情況」診斷稽核會顯示要求了多少第三方程式碼，以及這些程式碼在網頁載入期間阻擋主執行緒的時間長度。如要進一步瞭解第三方程式碼如何降低載入效能，請參閱「最佳化第三方資源」。

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

Chromium 問題 #772558

「成效」面板中的 Largest Contentful Paint

在「效能」面板中分析載入效能時，「時間軸」部分現在會顯示「最大內容繪製」 (LCP) 標記。LCP 會記錄可視區域中最大內容元素的算繪時間。

圖 8：「時間軸」部分中的「LCP」標記。

如要醒目顯示與 LCP 相關聯的 DOM 節點，請按照下列步驟操作：

1. 按一下「時間軸」部分中的「LCP」標記。

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

   

   圖 9：「摘要」分頁的「相關節點」部分。

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

從主選單回報開發人員工具問題

如果您在開發人員工具中遇到錯誤並想提出問題，或是對如何改善開發人員工具有任何想法並想要求新功能，請依序前往「主選單」>「說明」>「回報開發人員工具問題」，在開發人員工具工程團隊的追蹤器中建立問題。提供可重現的最小範例，可大幅提升團隊修正錯誤或實作功能要求的能力！

說明 > 回報開發人員工具的問題。" width="800" height="604">

圖 10：依序點選「主選單」 >「說明」 >「回報開發人員工具的問題」。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

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

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。

• 如要提供意見回饋或提出功能要求，請前往 crbug.com。
• 如要回報開發人員工具的問題，請依序點選開發人員工具中的 more_vert「更多選項」 >「說明」 >「回報開發人員工具的問題」。
• 在 Twitter 訊息中標記 @ChromeDevTools。
• 在「開發人員工具最新消息」或「開發人員工具提示」YouTube 影片中留言。

開發人員工具新功能

「開發人員工具新功能」系列涵蓋的所有主題清單。