Chrome 135 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

效能面板改善

這個版本對「效能」面板進行了多項改善。

「成效」中的設定檔和函式呼叫的來源和指令碼連結

「效能」>「摘要」分頁現在會顯示設定檔和函式呼叫的相關指令碼和來源連結，因此您不必將滑鼠游標懸停在「主要」軌跡中的這些事件上。

在「摘要」分頁中新增來源和出處前後的畫面。

此外，現在只要將滑鼠懸停在事件上，工具提示就會顯示第三方名稱 (如有)，方便您查看「網路」和「主要」軌跡。

Chromium 問題：368541957。

「依階段顯示 LCP」欄位資料支援

啟用實際工作環境資料後，「成效」>「深入分析」>「階段 LCP」深入分析資料現在會顯示額外表格，列出 Chrome 使用者體驗報告的第 75 個百分位數圖片時間，方便您直接在深入分析資料中比較時間。

新增欄位資料支援功能前後的「階段性 LCP」洞察資料。

「網路依附元件樹狀結構」深入分析

「效能」 >「洞察」分頁的集合中新增了「網路依附樹狀結構」洞察。洞察資訊會顯示您是否鏈結了關鍵要求 (不建議這麼做)。將游標懸停在洞察資訊中列出的要求上，即可在「網路」軌中醒目顯示這些要求。

詳情請參閱「避免鏈結關鍵要求」。

醒目顯示執行時間最長的堆疊

現在，當您在「呼叫樹狀結構」或「由下而上」 >「最重的堆疊」側欄中，將游標懸停在項目上時，「效能」面板會醒目顯示「主要」軌中的項目，並將其餘項目調暗。這項功能可讓您以視覺化方式，找出呼叫堆疊中耗時最長的巢狀項目。

「元素」中的無障礙樹狀結構檢視畫面

「元素」面板現在預設會開啟整頁無障礙功能樹狀結構檢視畫面。

先前，您可以在「元素」 >「無障礙」分頁中瀏覽個別的無障礙樹狀結構。現在，您只要按一下「元素」面板中 DOM 樹狀結構右上角的 「切換至無障礙功能樹狀結構檢視畫面」按鈕，即可在 DOM 和全頁無障礙功能樹狀結構之間來回切換，輕鬆探索這些樹狀結構及其關係。

開啟整頁模式的無障礙功能樹狀結構檢視畫面 (預設) 前後對照。

無障礙樹狀結構可讓您檢查輔助技術如何查看內容，並顯示 DOM 節點的 ARIA 屬性和計算出的無障礙屬性。詳情請參閱「Chrome 開發人員工具中的完整無障礙樹狀結構」。

Chromium 問題：40808541。

改善各種面板的空白狀態

我們簡化了各種面板、區段和分頁的空白狀態 (未開啟任何項目時)，讓您清楚知道如何開始使用這些項目。現在，部分空白狀態 (例如「網路」面板) 會顯示相關的實用按鈕，例如「重新載入頁面」。

改善「網路」和「搜尋」面板中的空白狀態前後比較。

「詢問 AI」選項移至選單底部

「詢問 AI」選項現在位於下拉式選單底部，而非頂端。

將「詢問 AI」選項移至下拉式選單底部前後的畫面。

歡迎在 crbug.com/364805393 的「AI 輔助」面板中提供意見。

Lighthouse 12.4.0

「Lighthouse」面板現在會執行 Lighthouse 12.4.0。

這個版本會將部分效能稽核標示為「通過條件下的資訊」，而不是隱藏在通過的稽核部分。請參閱完整異動清單。

如要瞭解如何使用開發人員工具中的 Lighthouse 面板，請參閱「Lighthouse：提升網站速度」。

Chromium 問題：40543651。

其他亮點

這個版本的重要修正和改良項目包括：

  • 「效能」 >「摘要」：將「總時間」和「自我時間」兩行替換為「時間長度」一行，並在括號中顯示 (self time) (如有) (crbug.com/395572753)。
  • 問題：新增問題類型：可存取性樹狀結構中的 <select> 問題，以及在網路服務中剖析或驗證時發生的 SRI 訊息簽章錯誤 (crbug.com/381044049、crbug.com/347890366)。
  • 無障礙：「元素」>「樣式」分頁現在會列出您使用鍵盤導覽逐步瀏覽的元素 (crbug.com/396311936)。
  • 元素：現在支援 <select> 的問題，並以波浪底線醒目顯示 (crbug.com/378738916)。
  • 網路：「覆寫點」和 Cookie 警告圖示現在會顯示在分頁名稱右側，而非左側 (crbug.com/390556283)。

下載預覽版頻道

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

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

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

開發人員工具新功能

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