Chrome DevTools AI功能
Chrome DevTools裡的AI助手：三個穩定版功能整理
Chrome DevTools裡的AI助手：三個穩定版功能整理
你將學到什麼
怎麼開啟AI創新
先把Chrome語言改成英文，再從DevTools設定齒輪進入AI Innovations。
Console Insights
解讀主控台錯誤訊息，例如CORS policy問題並給出解法建議。
AI Assistance
Elements、Network、Sources、Performance等面板都能直接向AI提問。
使用前的注意事項
功能屬實驗性質，資料會上傳Google，不建議輸入敏感資料。
喔一直想要寫但都沒寫，那個Chrome DevTools裡的 #AI創新 開發者的超級助手2025年04月就已經推出穩定版了，大家知道嗎？就是平常網頁上有啥問題，或者你想要偷走啥東西的時候，不是都會右鍵開檢查嗎？檢查開下去之後，點最上面第一顆齒輪的話，就可以看到DevTools裡面有 #AI創新。
這個怎麼用？
以前打開DevTools，滿滿的紅字訊息、奇怪的網頁行為，都是需要花很多時間交叉比對＋Google 搜尋，才能知道到底哪裡出問題，才能進一步debug。
那從四月初開始，Chrome就已經把穩定版的AI放進DevTools了，幫你解釋、標註、甚至給出修復建議。換句話說，不只是看數據，而是看懂數據，告訴你怎麼辦。
最關鍵的是，四月的穩定版有了AI對話歷史保存，可以持續追問，不會重開就歸零的功能了！
AI 創新裡面的亮點是？
先把chrome語言改為英文，最上方齒輪進去之後，AI創新（AI Innovations），你會看到三個核心功能，每個都可以單獨開關。
① Console Insights
讓AI幫你解讀控制台的錯誤訊息，甚至提供可能的修復方向。
例如遇到「CORS policy」，AI會先給你解釋與解法建議。
② AI Assistance
不只 Console，Elements、Network、Sources、Performance面板都可以直接問AI。你還可以問為什麼這張圖片載入這麼慢？AI會分析網路請求並告訴你可能的瓶頸。
③ Auto annotations（效能自動註解？）
Performance trace裡的時間軸，AI 會幫你標註關鍵事件和效能瓶頸。像是它會直接指出這段JavaScript執行時間異常長，你就能快速聚焦問題出在哪裡。
開啟功能前一定要注意
這些功能是 #實驗性質，你得先把DevTools語言切換成英文介面。然後這些資料都會上傳到 Google，用於AI模型優化，所以不要輸入敏感資料。
AI給的答案也不一定完全正確，人家還在實驗性質！
大概就是這樣囉！
#ChromeDevTools
本文原發表於 2025/09/01 的 Facebook 貼文，原文照登，僅調整網頁排版；文中提及的產品、價格與活動以當時為準。