Chrome 136 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

效能面板改善

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

全新成效洞察

「成效」 >「洞察」分頁會顯示新的洞察資料：

  • 現代 HTTP：會醒目顯示使用舊版 HTTP/1.1 通訊協定的請求。
  • 使用有效的快取生命週期，這項功能會標示出可從較長快取生命週期中受益的請求，並加快網站的載入時間。
  • 字體顯示：顯示最佳化 font-display 後可節省的預估時間。

「洞察」分頁新增三項洞察資料。

按一下即可醒目顯示

您現在可以點選「Summary」、「Bottom-up」、「Call tree」和「Event log」表格中的項目，讓追蹤記錄中相應的事件保持醒目顯示，並在瀏覽效能追蹤記錄時將其餘項目調暗。

網路要求摘要中的伺服器時間

「Performance」面板中的「Summary」分頁現在會顯示實作伺服器端算繪技術的網路要求伺服器時間。

網路要求摘要中的「伺服器時間」表格。

「Performance」面板會擷取 Server-Timing 回應標頭標頭中的資料。

在「隱私權和安全性」中篩選 Cookie

「隱私權和安全性」 >「隱私權」 >「第三方 Cookie」部分中的表格會加上篩選器，方便您更快找到感興趣的 Cookie。

「第三方 Cookie」表格中的篩選器。

各個面板中資料表的大小以 KB 為單位

為讓同一情境中的單位保持一致，現在「Network」和「Memory」面板中的表格，以及「Performance」 >「Summary」中的「1p / 3p table」都會以 KB 為單位顯示所有大小。這樣一來，您就能直接比較同一欄和不同面板中的數字，而不需要留意 MB 與 KB 與 B 單位的差異。

統一尺寸單位前後的比較。

自動完成功能支援「元素」>「樣式」中的 corner-shape 和 corner-*-shape

元素 > 樣式 中的自動完成功能現在可為 corner-shape 和 corner-*-shape 屬性提供對應的值。

「corner-shape」屬性的自動完成選項。

Chromium 問題：402346406。

實驗功能：在 DOM 中標示元素和屬性相關問題

有了這項實驗性功能，「元素」面板現在可以使用紅色波浪線下劃線，醒目顯示 DOM 元素或屬性的問題。將滑鼠游標懸停在這些元素或屬性上，即可在「Issues」面板中看到工具提示，其中包含對應錯誤的連結。

在 DOM 樹狀結構中標示 DOM 問題的「前」與「後」畫面，並顯示工具提示和「Issues」面板的連結。

「Elements」面板目前會醒目顯示 <select> 的無效子項、不相符的 ARIA 定義，以及無效的 ARIA 屬性。

Chromium 問題：378738916。

Lighthouse 12.5.0

Lighthouse 面板現在執行 Lighthouse 12.5.0。

在這個版本中，legacy-javascript 最顯著的變化是現在使用的是 Baseline，而非 esmodules。請參閱完整變更清單。

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

Chromium 問題：40543651。

其他精選內容

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

  • 成效 > 深入分析 > 網路依附元件樹狀圖：現在會顯示網路樹狀圖中所有網路要求的時間 (400708304)。
    • 網路依附元件樹狀結構：現在會顯示網路樹狀結構中所有網路要求的時間 (400708304)。
  • 動畫：修正了因擷取動畫而導致已分離元素出現在「Memory」面板中的錯誤 400635410。
  • 錄音器：現在在首次執行錄音功能時，會使用與貼上程式碼相同的確認對話方塊。
  • 圖層：現在會在底部的狀態列中顯示圖層總數，以及所有可見圖層的總記憶體。
  • 記憶體：透過在兩個 worker 之間並行執行工作，而非使用單一 worker，加快堆積快照初始化作業 (42203857)。
  • 問題：現在會回報 Local Network Access (LNA) CORS 錯誤 (395895368)。
  • 無障礙設計：
    • 工具提示：現在會在按下快速鍵時顯示，而非在取得焦點時顯示 (396311936)。
    • 元素 > 樣式：var() 函式現在可透過鍵盤互動，也就是說，您可以選取 --custom-property，然後按下 Enter 鍵，前往連結目標 (401212692)。

下載預覽管道

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

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

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

開發人員工具新功能

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