Chrome 135 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

效能面板改善

這個版本針對「Performance」面板進行多項改善。

在 Performance 中，設定檔和函式呼叫的來源和指令碼連結

「Performance」>「Summary」分頁現在會顯示指向相關指令碼和設定檔及函式呼叫來源的連結，因此您不必在「Main」追蹤記錄中將滑鼠游標懸停在這些事件上。

在「摘要」分頁中加入來源和原點之前和之後的畫面。

此外，當您將滑鼠游標懸停在事件上時，Network和Main追蹤記錄現在會在工具提示中顯示第三方名稱 (如果有)。

Chromium 問題：368541957。

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

啟用欄位資料後，「效能」 >「深入分析」 >「LCP 依階段劃分」深入分析資訊現在會在額外表格中顯示 Chrome 使用者體驗報告的第 75 百分位圖片時間，方便您直接在深入分析中比較時間。

在「LCP 按階段劃分」洞察資料中加入欄位資料支援功能前後的比較。

「網路依附元件樹狀結構」洞察資料

「Performance」 >「Insights」分頁會將新的「Network dependency tree」洞察資料加入收集資料中。這項洞察會告訴您是否已鏈結關鍵要求，這不是建議做法。將滑鼠游標懸停在洞察資料中列出的網路要求上，即可在「網路」軌跡中看到這些要求。

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

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

Performance 面板現在會在您在呼叫樹狀圖或自下而上 > 最重堆疊側欄中將游標懸停在項目上時，醒目顯示「Main」軌跡中的項目，並將其他項目調暗。這樣一來，您就能在呼叫堆疊中以視覺化方式找出耗用最多時間的巢狀項目。

Elements 中的無障礙樹狀檢視

根據預設，「元素」面板現在會顯示整頁無障礙功能樹狀結構檢視畫面。這項工具可讓您檢查輔助技術如何查看您的內容，並顯示 DOM 節點的 ARIA 屬性和計算的無障礙性屬性。

如要開啟無障礙樹狀檢視，請按一下「元素」面板中 DOM 樹狀結構右上角的 「切換至無障礙樹狀檢視」按鈕。

開啟整頁無障礙功能樹狀檢視畫面前後的畫面。

如需更多資訊，請參閱「Chrome 開發人員工具中的完整無障礙樹狀結構」。

Chromium 問題：40808541。

改善各種面板的空白狀態

我們已簡化各個面板、區段和分頁的空白狀態 (沒有任何內容時)，讓您確切瞭解如何開始使用這些面板、區段和分頁。例如在「Network」面板中，部分空白狀態現在會顯示相關的實用按鈕，例如「Reload page」。

改善「Network」和「Search」面板空白狀態前後的對照圖。

「Ask AI」選項已移至選單底部

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

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

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

Lighthouse 12.4.0

Lighthouse 面板現在執行 Lighthouse 12.4.0。

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

如要瞭解在開發人員工具中使用 Lighthouse 面板的基本知識，請參閱「Lighthouse：改善網站速度」。

Chromium 問題：40543651。

其他精選內容

以下是這個版本中值得注意的修正和改善項目：

  • Performance > Summary：將兩個 Total time 和 Self time 行替換為單行 Duration，並在括號中顯示 (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 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

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

開發人員工具的新功能

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