AI 不再「蒙著眼寫前端——它能直接打開 Chrome，錄製 performance trace、讀取網路請求、查看 Console、操作 DOM，再把證據與建議一起丟回來。

為什麼說是「勁敵」？

近年很多以 AI 為核心的瀏覽器自動化方案百花齊放，但大多還停留在「能操作」與「能看一點點」的層次。Chrome DevTools MCP 是 Google 官方釋出的 MCP 伺服器，把 Chrome DevTools 的偵錯能力完整暴露給 AI 助手：

• 直接在活的 Chrome 上調試與量測（例如一鍵 performance_start_trace、檢查 LCP）
• 擷取網路請求、Console 錯誤、DOM/CSS 狀態、截圖/快照
• 透過 MCP 讓各家 Agent/IDE（Gemini CLI、Claude Code、Cursor…）用自然語言驅動瀏覽器
  這些是傳統自動化框架要「自己整合半天」才可能達到的體驗，而現在開箱就支援，對同類工具形成實打實的壓力。
  *並且不需要串接API

它解了前端 AI 助手的「盲區」

官方把痛點講得很白：AI 助手看不到它寫出的網頁實際跑起來會怎樣。DevTools MCP 讓 Agent 能「看見並驗證」：例如要求它 打開頁面 → 錄 trace → 分析 LCP → 回報瓶頸與修法 ，整段由 AI 自己跑完。這代表從「只會猜」進化到「能收證據」，也代表你的回歸驗證、效能門檻、缺陷票證據鏈都能自動化。

核心能力

• Performance / 指標：啟動/停止 trace、分析 LCP/TBT/CLS、輸出可行的優化建議
• Network / Console：列舉失敗請求、抓 CORS/500、對照 Console 報錯與 Source Map
• DOM / CSS / 行為：讀 DOM、改樣式、填表單、點擊、等待條件、切視窗尺寸與弱網/CPU 節流
• 證據產出：截圖與 DOM/CSS 快照、時間線、請求樣本，把「問題-證據-建議-驗證」報告拉滿
• 設計整合：頁面截圖可以直接提供給 Figma 或設計工具，讓設計師與開發能同步在真實畫面上討論修改細節。

安裝與上手（超快）

在支援 MCP 的客戶端加入下列設定（官方示例）就能開跑，之後直接用自然語言下指令即可：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

試跑範例（官方範本）：「請幫我檢查 web.dev 的 LCP」。Agent 會自行啟動 Chrome、量測並回報。

如果你走 Claude 生態，也可以用提供的 .dxt 檔一鍵安裝到 Claude Desktop Extension；或依 README 的步驟用 Claude Code CLI 加入這個伺服器。

我覺得最值得的三個場景

1. 性能回歸：合併前自動錄 trace、抓 LCP/TBT 趨勢，超門檻就擋；
2. 疑難雜症取證：偶現 bug 讓 AI 自己重跑流程並產出錯誤堆疊 + 失敗請求 + 截圖；
3. 弱網/低端機體驗巡檢：一鍵切 Slow 3G + 4× CPU 節流 + 行動視窗，輸出可用性結論。

風險與注意

• 權限與隔離：AI 會操控你的瀏覽器實例，務必用隔離的使用者目錄與測試帳號；
• 儲存成本：trace/快照會變大，建議只保留「異常建置」的完整證據；
• 公開預覽期：能力會快迭代，先從最穩的「性能回歸＋關鍵路徑驗證」兩類任務開始。

Chrome DevTools MCP 已經具備「把 DevTools 變成 AI 能用的工具箱」的臨界體驗。這讓它不只是另一個「能點網頁」的自動化框架，而是能產出高質量證據與結論的調試助手——對同場競品，確實是強而有力的勁敵。

參考資料

GitHub 專案：Chrome DevTools MCP

介紹 Chrome DevTools MCP