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

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

Drawer 中的新「問題」分頁，可減少通知疲勞和控制台的雜亂情況。目前，網站開發人員、程式庫、架構和 Chrome 本身都會將訊息、警告和錯誤記錄到控制台。「問題」分頁會以結構化、彙整且可執行的方式，呈現瀏覽器的警告訊息、連結至開發人員工具中受影響的資源，並提供修正問題的指引。隨著時間推移，Chrome 的警告訊息會越來越多，這些訊息會顯示在「問題」分頁中，而非控制台中，有助於減少控制台的雜亂程度。

如要開始使用，請參閱「使用 Chrome 開發人員工具的「問題」分頁尋找及修正問題」。

Chromium 錯誤：#1068116

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

檢查模式工具提示現在會指出元素是否具有無障礙名稱和角色，以及是否可透過鍵盤操作。

Chromium 錯誤：#1040025

效能面板更新

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

記錄載入效能後，「效能」面板的頁尾現在會顯示「總阻塞時間」(TBT) 資訊。TBT 是載入效能指標，可協助量化網頁可用時間。這項指標主要測量網頁「顯示」可用狀態的時間長度 (因為內容已算繪至畫面上)，但「實際上不可用」，因為 JavaScript 會阻斷主執行緒，因此網頁無法回應使用者輸入內容。TBT 是主要的實驗室指標，用於估算首次輸入延遲時間，這是 Google 新推出的網站體驗核心指標之一。

如要取得「總阻塞時間」資訊，請不要使用「重新載入頁面」 工作流程記錄頁面載入成效。請改為點選「記錄」 手動重新載入網頁，等待網頁載入完成，然後停止記錄。如果看到 Total Blocking Time: Unavailable，表示開發人員工具未從 Chrome 的內部剖析資料取得所需資訊。

Chromium 錯誤：#1054381

新版「體驗」部分中的版面配置位移事件

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

按一下「版面配置位移」事件，即可在「摘要」分頁中查看版面配置位移的詳細資料。將滑鼠懸停在「Moved from」(從何處移動) 和「Moved to」(移動至何處) 欄位上，即可查看版面配置變更發生的位置。

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

記錄 Promise 時，Console 過去會錯誤地將 Promise 的狀態描述為 resolved：

控制台現在使用「fulfilled」一詞，與 Promise 規格一致：

V8 錯誤：#6751

樣式窗格更新

支援 revert 關鍵字

「樣式」窗格的自動完成 UI 現在會偵測 revert CSS 關鍵字，將屬性的層疊值還原為未變更元素樣式時的值。

Chromium 錯誤：#1075437

圖片預覽

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

Chromium 錯誤：#1040019

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

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

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

您也會在「已計算」窗格和「檢查模式」工具提示中看到語法。

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

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

Chromium 錯誤：#1072952

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

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

參考資料：

• console.dir()
• $0

資訊清單窗格支援應用程式捷徑

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

詳情請參閱「使用應用程式捷徑快速完成工作」。

下載預覽版頻道

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

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

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

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

開發人員工具新功能

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