AI coding agent 最大的弱點之一，是它常常只看程式碼，沒真正看瀏覽器裡發生什麼。
前端問題很多不是靜態 code 能判斷的：console error、network 失敗、layout overflow、hydration mismatch、performance bottleneck、互動狀態錯誤。Google 在 I/O ２０２６ 公布 Chrome DevTools for agents，就是要把瀏覽器除錯能力交給 AI agents。
它解決什麼問題？
傳統 coding agent 可以改檔案、跑測試、讀錯誤訊息，但前端開發需要更多 runtime context。
| 前端問題 | 靜態看 code 的限制 |
|---|---|
| Layout 跑版 | 需要實際 viewport 與 CSS cascade |
| Console error | 需要 runtime event |
| Network error | 需要 request／response |
| Performance 卡頓 | 需要 trace 與 timing |
| Hydration mismatch | 需要 client/server 對照 |
| UI interaction bug | 需要 click、type、scroll 驗證 |
Chrome DevTools for agents 的意義，是讓 agent 不只是寫 code，而是能檢查 code 在瀏覽器裡的行為。
和 Playwright MCP 差在哪？
Playwright 類工具讓 agent 操作瀏覽器，DevTools for agents 更偏向提供除錯與效能訊號。
| 工具 | 強項 |
|---|---|
| Playwright MCP | 操作頁面、點擊、輸入、截圖、驗證流程 |
| Chrome DevTools for agents | console、network、performance、runtime 除錯 |
| WebMCP | 讓網站以標準方式提供 agent 可讀介面 |
| Antigravity | 將 agent 編碼與工具整合到開發流程 |
實務上這些會互補，而不是互相取代。
適合哪些任務？
１．修前端 runtime error
Agent 可以讀 console stack trace，再回到 source code 修錯。
２．Network 問題
API ４０１、CORS、錯誤 payload、慢 request 都需要 network panel 才好判斷。
３．Performance regression
Agent 若能看 trace，就能更精準找出大 bundle、長 task、重複 render。
４．UI regression
只看 code 不知道按鈕是否被遮住、文字是否溢出。DevTools 加上截圖檢查，可以讓 agent 更接近真人前端除錯。
導入時要注意什麼？
不要讓 agent 只靠「頁面沒有 console error」就判定完成。
需要加上：
- 視覺截圖檢查。
- Desktop／mobile viewport。
- 互動流程測試。
- Accessibility check。
- CI regression test。
- 人工 review。
前端 bug 很容易修出「看起來過了，但使用者流程還是不順」的假成功。
結論
Chrome DevTools for agents 是 AI coding agent 走向真正前端開發的關鍵拼圖。
前端不是只改檔案，還要驗證瀏覽器 runtime。當 agent 能取得 DevTools 訊號，修 bug、找效能問題、檢查互動錯誤都會更可靠。
但最好的用法仍是讓 agent 提出可驗證修正，再由測試與 reviewer 把關。瀏覽器除錯能力讓 agent 更有眼睛，不代表它自動有產品判斷。