Chrome 135 版本開發者工具（DevTools）更新內容

一、性能（Performance）面板改進

1. 性能面板中的配置文件和函數調用現已顯示來源和腳本鏈接

Performance > Summary（性能 > 概覽）選項卡現在會顯示配置分析（profile）和函數調用相關的腳本及來源鏈接，這樣就不需要再將鼠標懸停在 Main 軌道上的事件上來查看這些信息了。

顯示在 Summary 面板中添加來源和腳本鏈接前后的對比。

此外，當將鼠標懸停在 Network（網絡）或 Main（主線程）軌道上的事件時，工具提示中現在還會顯示第三方名稱。

2. 支持按階段劃分的 LCP字段數據

啟用字段數據后，Performance > Insights > LCP by phase（按階段劃分的最大內容繪制）洞察項現在會在額外的表格中顯示來自 Chrome 用戶體驗報告的第 75 百分位圖像加載時間，可以直接在該洞察中對比各階段的加載時間。

3. 網絡依賴樹洞察項

Performance > Insights（性能 > 洞察）標簽頁新增了一個名為 Network dependency tree（網絡依賴樹）的洞察項。該洞察可以知道是否存在串聯的關鍵請求，而這通常是不推薦的。可以將鼠標懸停在洞察項中列出的請求上，它們會在 Network（網絡）軌道中被高亮顯示。

4. 最重調用棧高亮顯示

Performance 面板現在支持將鼠標懸停在 Call tree（調用樹）或 Bottom-up > Heaviest stack（自底向上 > 最重調用棧）側邊欄中的項時，在 Main 軌道中高亮顯示對應內容，并自動淡化其他內容。這樣可以更直觀地找到調用棧中耗時最多的嵌套項。

二、Elements 面板中的輔助功能樹視圖

現在，Elements（元素）面板默認啟用了全頁輔助功能（Accessibility）樹視圖。

之前只能在 Elements > Accessibility 標簽頁中瀏覽一個獨立的輔助功能樹。現在，可以點擊 DOM 樹右上角的 “輔助功能樹視圖切換” 按鈕（圖標為 accessibility_new），在 DOM 樹與全頁輔助功能樹之間自由切換，方便同時查看兩者及其對應關系。

啟用默認的輔助功能樹視圖前后的界面差異也被展示了出來。

輔助功能樹允許檢查輔助技術（如屏幕閱讀器）如何感知頁面內容，并顯示每個 DOM 節點的 ARIA 屬性及其計算后的輔助功能屬性。

三、多個面板的空狀態優化

針對多個面板、區域和標簽頁在“空狀態”（即無內容顯示）下的界面進行了優化，能夠更清楚地知道接下來該做什么來開始使用它們。

例如，Network（網絡）面板中的空狀態現在新增了實用按鈕，如“重新加載頁面”（Reload page），快速觸發網絡活動，開始調試。

四、Ask AI 選項移至菜單底部

Ask AI（詢問 AI）選項現在已從下拉菜單的頂部移到了菜單的底部，更符合用戶的操作習慣和界面布局邏輯。

五、Lighthouse 升級至 12.4.0

Lighthouse 面板現已升級為 Lighthouse 12.4.0 版本。

在此版本中，一些性能審計項在通過條件下會被標記為“信息性（informative）”，而不再隱藏在“已通過的審計”列表中，更全面地了解頁面表現。

六、其他

• 性能 > Summary：將原來的“兩行 Total time 與 Self time”合并為“一行 Duration”，若有自耗時則會以括號形式顯示（例如 Duration (self: 12ms)），簡化展示信息
• Issues 面板：新增兩種問題類型支持：
  • <select> 元素在輔助功能樹中的相關問題；
  • 網絡服務中解析或校驗時發生的 SRI 消息簽名錯誤
• 輔助功能（Accessibility）：使用鍵盤導航在 Elements > Styles 中逐步查看元素時，當前元素現在會有可視化描邊提示
• Elements 面板：與 <select> 元素相關的問題現在會被高亮標出，顯示為波浪下劃線
• Network 面板：覆蓋提示點（override dot）和 Cookie 警告圖標的位置從標簽左側移到了右側，使界面更整潔

Chrome 135

• Performance panel improvements
• Origin and script links for profile and function calls in Performance
• LCP by phase field data support
• Network dependency tree insight
• Duration instead of total and self time in Summary
• Heaviest stack highlighting
• Improved empty states for various panels
• Accessibility tree view in Elements
• Lighthouse 12.4.0
• Miscellaneous highlights

引用

• What’s new in DevTools