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

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

您現在可以使用「Audits」面板,結合其他開發人員工具功能,例如要求封鎖本機覆寫

舉例來說,假設您的「稽核」面板報表顯示網頁的效能分數為 70,而最大的效能商機之一就是排除會封鎖轉譯資源

一開始的效能分數是 70。

圖 1. 初始效能分數。

初始報表指出有 3 個會妨礙轉譯的指令碼有問題。

圖 2. 初始報表指出有 3 個會妨礙轉譯的指令碼有問題。

「Audits」(稽核) 面板現在可與要求封鎖功能搭配使用,因此您可以先封鎖會禁止轉譯的指令碼要求,藉此迅速評估轉譯封鎖指令碼對載入效能的影響:

使用「請求封鎖」分頁封鎖有問題的指令碼。

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

然後再次稽核網頁:

啟用要求封鎖功能後,效能分數提高至 97。

圖 4. 封鎖有問題的指令碼後,「成效」分數提高至 97。

或者,您也可以使用本機覆寫,為每個指令碼標記新增 async 屬性,但「會將該屬性保留為讀者練習。」如要試用,請前往多重用戶端示範。或是前往這個推文觀看示範影片。

Chromium 問題 #991906

付款處理常式偵錯

「Application」面板的「Background Services」區段現在支援付款處理常式事件。

  1. 前往「Application」面板
  2. 開啟「Payment Handler」窗格。
  3. 按一下「錄製」。即使開發人員工具已關閉,開發人員工具仍會記錄付款處理常式事件 3 天。

    記錄付款處理常式事件。

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

  4. 如果您的付款處理常式事件發生於不同的來源,請啟用「Show events from 其他網域」

  5. 觸發付款處理常式事件後,請按一下事件列以進一步瞭解該事件。

    查看付款處理常式事件。

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

Chromium 問題 #980291

稽核面板中的 Lighthouse 5.2

稽核面板現在正在執行 Lighthouse 5.2。新的「第三方用量」診斷稽核功能可讓您查看要求的第三方程式碼有多少,以及第三方程式碼在網頁載入時封鎖主要執行緒的時間長度。如要進一步瞭解第三方程式碼如何降低載入效能,請參閱「最佳化第三方資源」。

Lighthouse 報告使用者介面中的「第三方用量」稽核螢幕截圖。

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

Chromium 問題 #772558

「效能」面板中的「最大內容繪製」

在「Performance」(效能) 面板分析載入效能時,「Timings」(時間) 區段現在會包含「Largest Contentful Paint」(最大內容繪製) (LCP) 的標記。LCP 會回報可視區域中最大可見內容元素的轉譯時間。

「時間」部分中的 LCP 標記。

圖 8:「Timings」區段的 LCP 標記。

如何醒目顯示與 LCP 相關聯的 DOM 節點:

  1. 在「Timings」部分按一下「LCP」標記。
  2. 將滑鼠遊標懸停在「摘要」分頁中的「相關節點」上,即可醒目顯示可視區域中的節點。

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

    圖 9:「Summary」分頁的「Related Node」區段。

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

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

如果您遇到開發人員工具中的錯誤並想回報問題,或是想瞭解如何改善開發人員工具,並想申請新功能,請依序前往「主選單」>「說明」>「回報開發人員工具問題」,然後在開發人員工具工程團隊的追蹤工具中建立問題。在 Glitch 中提供最小且可重現的範例,可大幅提升團隊修正錯誤或導入功能要求的能力!

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

圖 10:「主選單」 >「說明」 >「回報開發人員工具的問題」

下載預覽管道

考慮使用 Chrome Canary 版開發人員版Beta 版做為預設開發瀏覽器。這些預覽管道可讓您存取開發人員工具的最新功能、測試最先進的網路平台 API,並在使用者使用之前就在網站上發現問題!

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

使用下列選項,討論文章的新功能和異動,以及其他與開發人員工具相關的事項。

  • 請透過 crbug.com 提交建議或意見回饋。
  • 如要回報開發人員工具的問題,請在開發人員工具中依序點選「更多選項」圖示 更多   >「說明」 >「回報開發人員工具的問題」
  • @ChromeDevTools 張貼推文。
  • 歡迎對開發人員工具的 YouTube 影片或開發人員工具秘訣 (YouTube 影片) 提供意見。

開發人員工具的新功能

這裡列出了「開發人員工具新功能」系列中已涵蓋的所有功能。

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110 版本

Chrome 109 版

Chrome 108 版

Chrome 107 版

Chrome 106 版

Chrome 105

Chrome 104 版

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 指南

Chrome 99

Chrome 98 版

Chrome 97

Chrome 96

Chrome 95

Chrome 94 版

Chrome 93 版

Chrome 92 版

Chrome 91 版

Chrome 90

Chrome 89

Chrome 88 版

Chrome 87

Chrome 86

Chrome 85 版

Chrome 84 版

Chrome 83 版

Chrome 82 版

Chrome 82 已取消

Chrome 81 版

Chrome 80 版

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59