Chrome v137 開發者工具重磅升級 Gemini 智能標註讓性能分析秒變神器！

Google 近日發佈了 Chrome v137開發者工具（Chrome DevTools）的重大更新，集成了 Gemini AI 智能助手，爲開發者帶來前所未有的性能分析和調試體驗。從智能標註性能追蹤到 CSS 修改保存，Chrome v137的新功能極大提升了開發效率。AIbase 綜合整理最新信息，爲您詳細解析此次更新的亮點與應用前景。

Gemini 智能標註:性能分析更直觀

Chrome v137DevTools 引入了 Gemini 智能標註功能，開發者可通過雙擊性能追蹤中的主軌道（Main Track）事件，點擊“生成標籤”按鈕，讓 Gemini 根據堆棧跟蹤和上下文自動生成事件標籤。這一功能極大簡化了性能分析流程，幫助開發者快速理解複雜性能數據的含義。此外，開發者還可以在“Annotations”選項卡中爲時間範圍添加標籤、連接事件，甚至分享標註結果，提升團隊協作效率。

AI 驅動 CSS 調試:一鍵修改與保存

新版本的 DevTools 允許開發者通過 Gemini 智能助手直接修改和修復 CSS。只需在“Elements”面板中點擊“Ask AI”，輸入 CSS 修改需求，Gemini 即可生成代碼並支持實時預覽。結合實驗性的自動工作區功能，開發者可將修改後的 CSS、JavaScript 或 HTML 直接保存至本地源文件，極大提升調試效率。AIbase 認爲，這一功能將顯著縮短前端開發的工作流程。

性能面板新洞察:發現隱藏問題

Chrome v137的性能面板新增了兩項關鍵洞察:重複 JavaScript 和 傳統 JavaScript。這些洞察幫助開發者識別代碼中的冗餘和過時部分，從而優化網站加載速度和運行時性能。此外，開發者可通過一鍵啓動與 Gemini 的對話，深入分析性能瓶頸，獲得針對性優化建議。

視覺輔助與截圖:調試更具上下文

爲增強調試的直觀性，Chrome v137在 AI 輔助面板中新增了截圖功能。開發者可通過點擊“拍照”按鈕捕捉頁面截圖，並將其作爲上下文提交給 Gemini，用於分析頁面佈局或樣式問題，例如檢查按鈕間距是否一致。這一功能爲視覺調試提供了更豐富的上下文支持。

Gemini 賦能開發者生態

Chrome v137DevTools 的更新標誌着 AI 在開發者工具中的深度融合。Gemini 不僅通過智能標註和 CSS 修改簡化了複雜任務，還通過性能洞察和截圖功能爲開發者提供了更全面的調試支持。AIbase 認爲，隨着 Gemini Nano 等本地 AI 模型的進一步集成，Chrome DevTools 有望成爲前端開發者的“超級助手”，推動 Web 開發效率邁上新臺階。

結語

Chrome v137開發者工具的更新以 Gemini AI 爲核心，帶來了智能標註、CSS 自動修改和性能優化洞察等一系列創新功能，爲開發者提供了更高效、直觀的調試體驗。