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

Kayce Basques

使用新的「問題」分頁修正網站問題

抽屜中的新「Issues」分頁可減少通知過多和控制台雜亂的情況。目前，控制台是網站開發人員、程式庫、架構和 Chrome 本身用來記錄訊息、警告和錯誤的集中位置。「Issues」分頁會以結構化、匯總且可採取行動的方式呈現瀏覽器的警告，並連結至 DevTools 中受影響的資源，以及提供如何修正問題的指引。隨著時間的推移，Chrome 的警告會逐漸顯示在「問題」分頁中，而非控制台，這應該有助於減少控制台的雜亂。

請參閱「使用 Chrome 開發人員工具的「問題」分頁找出並修正問題」一文，瞭解如何開始使用。

「問題」分頁。

Chromium 錯誤：#1068116

在「檢查模式」工具提示中查看無障礙資訊

檢查模式提示訊息現在會指出元素是否具有可存取的名稱和角色，以及是否可供鍵盤聚焦。

檢查模式工具提示，其中包含無障礙資訊。

Chromium 錯誤：#1040025

效能面板更新

在頁尾查看總封鎖時間 (TBT) 資訊

記錄載入成效後，「成效」面板現在會在頁尾顯示總阻斷時間 (TBT) 資訊。TBT 是載入效能指標，可協助量化網頁可供使用所需的時間。這項指標主要是測量網頁「看起來」可用的時間 (因為內容已算繪至畫面)，但實際上「無法使用」，因為 JavaScript 會阻斷主執行緒，因此網頁無法回應使用者輸入內容。TBT 是用來估算 First Input Delay 的主要實驗室指標，也是 Google 新推出的 Core Web Vitals 之一。

如要取得總阻斷時間資訊，請勿使用「Reload Page」重新載入頁面工作流程記錄網頁載入成效。請改為按一下「記錄」圖示 記錄，手動重新載入網頁，等待網頁載入，然後停止錄製。如果看到 Total Blocking Time: Unavailable，表示 DevTools 無法從 Chrome 的內部分析資料取得所需資訊。

成效資訊面板錄製畫面底部的總阻斷時間資訊。

Chromium 錯誤：#1054381

新版「體驗」部分中的版面配置轉換事件

效能面板中的新「體驗」部分可協助您偵測版面配置變動。累計版面配置位移 (CLS) 是可用來量化不必要視覺不穩定情形的指標，也是 Google 新推出的網站使用體驗核心指標報告之一。

按一下「Layout Shift」事件，即可在「Summary」分頁中查看版面配置變更的詳細資料。將滑鼠游標懸停在「Moved from」和「Moved to」欄位上，即可查看版面配置移至的位置。

版面配置移位作業的詳細資料。

管理中心使用更準確的承諾術語

記錄 Promise 時，主控台會將 Promise 的狀態誤描述為 resolved：

控制台使用舊版「已解決」用語的範例。

控制台現在使用 fulfilled 這個詞彙，符合 Promise 規格：

控制台使用新「已完成」用語的範例。

V8 錯誤：#6751

樣式窗格更新

支援 revert 關鍵字

樣式窗格中的自動完成 UI 現已可偵測 revert CSS 關鍵字，這可將屬性的連鎖值還原為元素樣式未變更前的值。

將屬性值設為復原。

Chromium 錯誤：#1075437

圖片預覽

將滑鼠游標懸停在「樣式」窗格中的 background-image 值上，即可在工具提示中預覽圖片。

將滑鼠游標懸停在 background-image 值上。

Chromium 錯誤：#1040019

顏色挑選器現在會使用以空格分隔的功能性顏色符號

CSS 顏色模組第 4 級規定 rgb() 等顏色函式應支援以空格分隔的引數。舉例來說，rgb(0, 0, 0) 相當於 rgb(0 0 0)。

當您使用顏色挑選器選擇顏色，或是按住 Shift 鍵並點選顏色值，在「樣式」窗格中切換顏色表示方式時，現在會看到以空格分隔的引數語法。

在「樣式」窗格中使用以空格分隔的引數。

您也會在「Computed」窗格和「Inspect Mode」工具提示中看到語法。

由於即將推出的 CSS 功能 (例如 color()) 不支援已淘汰的半形逗號分隔引數語法，因此開發人員工具會使用新語法。

多數瀏覽器已支援以空格分隔的引數語法一段時間。請參閱「我可以使用以空格分隔的功能性顏色標記嗎？」

Chromium 錯誤：#1072952

淘汰「元素」面板中的「屬性」窗格

「元素」面板中的「屬性」窗格已淘汰。請改為在 控制台中執行 console.dir($0)。

已淘汰的「屬性」窗格。

參考資料：

資訊清單窗格中的應用程式捷徑支援功能

應用程式捷徑可協助使用者在網頁應用程式中快速啟動常見或建議的工作。應用程式捷徑選單只會顯示在使用者電腦或行動裝置上安裝的漸進式網頁應用程式中。

如要進一步瞭解，請參閱「透過應用程式捷徑快速完成工作」。

「資訊清單」窗格中的應用程式捷徑。

下載預覽管道

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

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

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

開發人員工具的新功能

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