Chrome 136 版 DevTools 的新功能

Sofia Emelianova
Sofia Emelianova
GitHub

效能面板改善

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

全新成效洞察

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

  • 現代 HTTP：醒目顯示使用舊版 HTTP/1.1 通訊協定的要求。
  • 使用有效的快取生命週期，找出可延長快取生命週期的要求，進而加快網站載入速度。
  • 字體顯示：顯示最佳化 font-display 後預估可節省的時間。

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

按一下即可醒目顯示

現在只要在「摘要」、「由下而上」、「呼叫樹狀結構」和「事件記錄」表格中點選項目，即可在瀏覽效能追蹤記錄時，醒目顯示相應事件，並將其餘項目調暗。

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

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

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

「效能」面板會從 Server-Timing 回應標頭標頭擷取資料。

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

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

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

面板中資料表的大小 (以 KB 為單位)

為確保同一環境中的單位一致，現在「網路」和「記憶體」面板，以及「成效」>「摘要」中的「1p / 3p 表格」，都會以 KB 為單位顯示所有大小。這樣一來，您就能直接比較同一資料欄和不同面板中的數字，不必再留意 MB、KB 和 B 單位。

統一大小單位前後的比較。

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

「元素」>「樣式」中的自動完成功能現在可以建議 corner-shape 和 corner-*-shape 屬性的對應值。

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

Chromium 問題：402346406。

實驗功能：醒目顯示 DOM 中元素和屬性的問題

這項實驗性新功能推出後，「元素」面板現在會以紅色波浪底線，醒目顯示 DOM 元素或屬性的問題。將游標懸停在這些元素或屬性上，即可查看工具提示，其中包含「問題」面板中相應錯誤的連結。

前後對照：DOM 樹狀結構中醒目顯示 DOM 問題，並提供工具提示和「問題」面板的連結。

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

Chromium 問題：378738916。

Lighthouse 12.5.0

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

最值得一提的是，這個版本的 legacy-javascript 現在使用 Baseline，而非 esmodules。如需完整變更清單，請參閱這篇文章。

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

Chromium 問題：40543651。

其他重點

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

  • 「效能」 >「洞察」 >「網路依附樹狀結構」：現在會顯示網路樹狀結構中所有網路要求的時間 (400708304)。
    • 網路依附元件樹狀結構：現在會顯示網路樹狀結構中所有網路要求的時間 (400708304)。
  • 動畫：修正了因擷取動畫而導致已卸離元素出現在「記憶體」面板中的錯誤 400635410。
  • 錄音工具：首次執行錄音時，現在會顯示與貼上程式碼時相同的確認對話方塊。
  • 圖層：現在會在底部的狀態列中顯示圖層總數，以及所有可見圖層的總記憶體。
  • 記憶體：現在會使用兩個工作站平行處理工作，而非一個，因此堆積快照初始化作業的速度更快 (42203857)。
  • 問題：現在會回報區域網路存取 (LNA) CORS 錯誤 (395895368)。
  • 無障礙功能：
    • 工具提示：現在會在按下快速鍵時顯示，而非在焦點上顯示 (396311936)。
    • 「元素」 >「樣式」：現在可以使用鍵盤與 var() 函式互動，也就是選取 --custom-property 並按下 Enter 鍵，即可前往連結目標 (401212692)。

下載預覽版頻道

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

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

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

開發人員工具新功能

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