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

Kayce Basques

透過新的「問題」分頁修正網站問題

導覽匣的全新「問題」分頁旨在降低通知的疲勞程度， 控制台。目前，控制台是網站開發人員、程式庫 以及 Chrome 本身來記錄訊息、警告和錯誤。「問題」分頁 以結構化、匯總和可行的方式顯示瀏覽器警告，以及受影響的連結 以及修正問題的指引隨時隨地皆可使用更多功能 Chrome 的警告會顯示在「問題」分頁 (而非控制台) 中，這應該可以幫助 以便減少主控台的雜訊

請先參閱「找出並修正 Chrome 開發人員工具的問題」分頁，瞭解如何著手解決。

「問題」分頁。

Chromium 錯誤：#1068116

在「Inspect Mode」工具提示中查看無障礙功能資訊

「檢查模式」工具提示現在會指出元素是否具備可存取的名稱和角色 而且支援鍵盤聚焦。

包含無障礙功能資訊的檢查模式工具提示。

Chromium 錯誤：#1040025

效能面板更新

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

記錄載入成效後，「效能」面板現在會顯示「Total Blocking Time」 (TBT) 資訊。TBT 是負載效能指標 用於量化數據 需要網頁才能使用基本上，這項指標會評估網頁「顯示」的時間 (因為其內容已顯示在畫面上)，但因為 JavaScript 而無法實際使用 會封鎖主執行緒，因此網頁無法回應使用者輸入的內容。TBT 是主要的研究室 指標，以便推算出首次輸入延遲時間，這是 Google 新推出的Core Web Vitals 之一。

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

效能面板記錄的頁尾總封鎖時間資訊。

Chromium 錯誤：#1054381

新版「體驗」專區中的版面配置位移事件

「成效」面板新增的「體驗」部分有助於偵測版面配置位移。 累計版面配置位移 (CLS) 這項指標能量化不必要的視覺不穩定度 是 Google 新推出的 Core Web Vitals 之一。

按一下「Layout Shift」事件，即可在「Summary」分頁中查看版面配置位移的詳細資料。懸停 將滑鼠遊標移至「Moved from」和「Moved」欄位，以視覺化方式呈現版面配置位移發生的位置。

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

控制台提供更精確的承諾使用詞彙

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

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

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

使用新的「fulfill」做為控制台範例術語

V8 錯誤：#6751

樣式窗格更新

支援 revert 關鍵字

「樣式」窗格的 Autocomplete 使用者介面現在會偵測 revert CSS 關鍵字，進而還原 將屬性值「附加至」 調整元素的樣式

設定要還原的屬性值。

Chromium 錯誤：#1075437

圖片預覽

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

將滑鼠遊標懸停在背景圖片值上。

Chromium 錯誤：#1040019

顏色挑選器現在採用以空格分隔的功能顏色標記法

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

使用顏色挑選器選擇顏色時，或是在 只要按住 Shift 鍵並點選色彩值，即可「樣式」窗格，現在將看到以空格分隔的樣式 引數語法。

在「Styles」窗格中使用空格分隔的引數。

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

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

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

Chromium 錯誤：#1072952

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

「Elements」面板中的「Properties」窗格已淘汰。在console.dir($0) 請改為管理中心。

已淘汰的「屬性」窗格。

參考資料：

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

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

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

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

下載預覽頻道

建議您使用 Chrome Canary、Dev 或 Beta 版做為預設的開發瀏覽器。透過這些預覽版本，您可以存取開發人員工具中的最新功能、測試最先進的網路平台 API，以及找出網站的問題，以免使用者發現問題。

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

請使用下列選項，討論貼文中的新功能和異動，或與開發人員工具相關的其他事項。

  • 歡迎透過 crbug.com 提出建議或意見。
  • 使用「更多選項」更多 > 回報開發人員工具問題說明 >在開發人員工具中回報開發人員工具問題。
  • 前往 @ChromeDevTools 張貼 Tweet。
  • 歡迎在「開發人員工具」推出「最新消息」YouTube 影片或「開發人員工具秘訣」YouTube 影片留言。

開發人員工具新功能

「開發人員工具新功能」系列中的所有文章清單。