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

Kayce Basques

稽核面板支援多個客戶

您現在可以使用「Audits」面板，搭配其他 DevTools 功能，例如「Request Blocking」和「Local Overrides」。

舉例來說，假設「稽核」面板報表指出網頁的成效分數為 70，而最大的成效機會之一是移除造成轉譯阻斷的資源。

圖 1. 初始效能分數。

圖 2. 初步報告指出，有 3 個轉譯阻斷腳本有問題。

由於現在可以將「稽核」面板與要求封鎖功能搭配使用，您可以先封鎖要求的轉譯阻斷程式腳本，快速評估轉譯阻斷程式腳本對載入效能的影響程度：

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

然後再次稽核網頁：

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

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

Chromium 問題 #991906

付款處理常式偵錯

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

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

3. 按一下「錄製」。開發人員工具會記錄 3 天的 Payment Handler 事件，即使關閉開發人員工具也一樣。

   

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

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

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

   

   圖 6. 查看 Payment Handler 事件。

Chromium 問題 #980291

「Audits」面板中的 Lighthouse 5.2

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

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

Chromium 問題 #772558

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

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

圖 8：「Timings」部分中的 LCP 標記。

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

1. 按一下「Timings」部分中的 LCP 標記。

2. 將滑鼠游標懸停在「Summary」分頁中的「Related Node」上，即可在可視區域中醒目顯示節點。

   

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

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

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

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

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

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

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。

• 請前往 crbug.com 提交意見回饋和功能要求。
• 在開發人員工具中，依序按一下「more_vert」more_vert更多選項 >「Help」 >「Report a DevTools issue」，即可回報開發人員工具的問題。
• 在 Twitter 上傳送訊息給 @ChromeDevTools。
• 在 YouTube 影片「What's new in DevTools」或「DevTools 提示」YouTube 影片中留言。

開發人員工具的新功能

DevTools 新功能系列文章中涵蓋的所有內容清單。