动态

详情 返回 返回

Chrome 135 版本開發者工具(DevTools)更新內容 - 动态 详情

Chrome 135 版本開發者工具(DevTools)更新內容

一、性能(<font style="color:rgb(32, 33, 36);">Performance</font>)面板改進

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

引用

user avatar zourongle 头像 54r9rxzy 头像 asmallwhitecat 头像 autohometech 头像 axuicn 头像 guixudepubu 头像 lingleidejiandao 头像 tsteam 头像 huobaodechahu 头像 imouou_5a60be738882f 头像
点赞 10 用户, 点赞了这篇动态!
点赞

Add a new 评论

Some HTML is okay.