Chrome 133 版本開發者工具（DevTools）更新內容详情 - chrome,chrome-devtools,前端,瀏覽器月恆日志

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

引用

What's new in DevTools

月恆日志

@gqkmiss

标签

前端 (1157)

Javascript (735)

人工智能 (486)

Python (289)

vue.js (260)

react (167)

node.js (141)

chrome (57)

ecmascript-6 (55)

性能優化 (53)

llm (53)

瀏覽器 (43)

动态

Chrome 133 版本開發者工具（DevTools）更新內容 - 动态详情