Chrome 133 版本開發者工具(DevTools)更新內容
一、持久化的 AI 聊天記錄
AI 助手面板會在本地持久化聊天記錄,即使重新加載 DevTools 或 Chrome,也可以查看之前與 Gemini 的對話內容。
二、Performance 面板改進
此版本為 Performance 面板帶來了多項改進。
1. 圖像交付洞察
Performance > Insights 選項卡可以突出顯示文件大小可進一步優化的圖像。單擊洞察中的圖像,即可在 Network track 中查看它的高亮顯示。
2. 經典模式和現代模式的鍵盤導航
Performance 面板現支持選擇首選鍵盤導航風格,主要區別如下:
-
Classic(經典):
- 使用鼠標滾輪(或觸控板上下)進行縮放
- 通過 Shift + 鼠標滾輪 實現垂直滾動
-
Modern(現代):
- 通過鼠標滾輪實現垂直滾動
- 通過 Shift + 鼠標滾輪 實現水平滾動
- 通過 Command/Control + 鼠標滾輪 實現縮放
要選擇偏好風格,在面板右上角點擊幫助按鈕 Show shortcuts,然後選擇 Classic 或 Modern。該快捷鍵對話框還提供了一張可用快捷鍵的速查表。
3. 在火焰圖中忽略無關腳本
為了更好地專注於代碼,可以直接在 Performance 面板裏將無關的腳本添加到 ignore list 中。面板會自動摺疊過度嵌套的部分。
要將腳本添加至 ignore list,點擊頂部操作欄中的 compress Show ignore list settings dialog,然後在輸入框中輸入一條正則表達式。隨着輸入,flame chart 會實時應用新的規則。
DevTools 會將在 Settings > Ignore list 中添加的 ignore list 規則保存下來,並允許在對話框中隨時開啓或關閉它們。
4. 時間軸標記與範圍高亮(懸停時)
為幫助更好地理解性能跟蹤,Performance 面板具有以下功能:
- 當將鼠標懸停在 Timeline 上時,會顯示一條跨越整個性能跟蹤的垂直標記。
- 當將鼠標懸停在 Main track 中的項目上時,會在 Timeline 上高亮顯示一個範圍。
5. 推薦的限流設置
Performance 面板在實時指標以及相關的設置(Capture settings 下拉菜單)中均推薦了限流設置。
目前推薦的 CPU 限流為最常用的 4 倍降速,而網絡推薦則基於 Chrome UX Report 數據(前提是在實時指標中啓用了該功能)。
此外,Performance 面板會在操作欄中 Recent sessions 下拉菜單的每個 trace 旁邊提醒使用的限流設置。
6覆蓋中的時間標記
時間標記已從 Timings track 移至 trace 底部,會覆蓋在所有軌道上,即使 Timings track 被隱藏,它們依然可見。
Timings track 保留了自定義的 mark() 和 measure() 調用。
7. Summary 中的 JavaScript 調用堆棧跟蹤
Performance > Summary 選項卡會顯示 JavaScript 調用的堆棧跟蹤,包括異步調用。
三、Elements 中的徽章設置移至菜單
Elements 面板中的徽章設置已從默認隱藏的操作欄移至相應的右鍵菜單中。
四、新的 “What’s new” 面板
What’s new 面板採用了全新外觀,更加貼近 Chrome 的設計風格。
五、Lighthouse 12.3.0
Lighthouse 面板運行 Lighthouse 12.3.0。
此次更新新增了包括檢查 COOP 下正確的源隔離和強 HSTS 策略在內的新審計。
六、其他
- Sources:在暫停狀態下,如果 service worker 在暫停後創建,Debugger 不會意外切換到 service worker 上下文
-
Performance:當懸停在腳本上時,火焰圖中的工具提示會顯示 URL
- Summary:餅圖已被條形圖所取代
- Capture settings:“Extension data” 複選框已重命名為 “Show custom tracks”
- Insights:Insights 選項卡默認摺疊顯示 “Passed insights (N)” 部分
- Application > Storage:可以創建鍵為空的存儲項,因為從技術上講這是有效的
- Device mode:chrome:// 頁面禁用了設備模式
-
Network:
- 在啓用相應設置後,點擊一次 “Export HAR” 現會打開一個包含兩個選項(經過脱敏和包含敏感數據)的菜單,此前需要長按才能打開菜單
- “Copy as cURL” 使用 -b 參數來繞過 cookies 並使輸出更易讀,而不是使用 -H 'cookie:...'
- Accessibility:可以通過上下文菜單在面板內左右移動標籤
- Network request blocking:此命令菜單設置現與相應的複選框保持同步
Chrome 133
- Persistent AI chat history
- Performance improvements
- Image delivery insight
- Classic and modern keyboard navigation
- Ignore irrelevant scripts in the flame chart
- Timeline marker and range highlighting on hover
- Recommended throttling settings
- Timings markers in an overlay
- Stack traces of JS calls in Summary
- Badge settings moved to menu in Elements
- New 'What's new' panel
- Lighthouse 12.3.0
- Miscellaneous highlights