Chrome DevTools MCP：Google 官方提供的 AI Agent 即時檢測與偵錯瀏覽器工具

網址

https://github.com/ChromeDevTools/chrome-devtools-mcp

2025-09-25 07:20:52

許多 AI Agent（如用大型語言模型作為後端的系統）在輸出程式碼時，有一個根本的限制：它們看不到程式碼在瀏覽器中實際運行時的行為。換句話說，就像是 AI 在「蒙著眼睛寫前端」——它無法即時偵錯、無法取得執行時的錯誤訊息或效能資料。

為了解決這個限制，Chrome 團隊推出了 Chrome DevTools MCP（Model Context Protocol）伺服器 的公開預覽版本。透過這個伺服器，AI 編碼助手就可以「連上」瀏覽器，使用 Chrome DevTools 的功能來偵錯、量測、分析網頁 — 不再只能進行靜態分析。

什麼是 MCP？Chrome DevTools MCP 的角色

MCP（Model Context Protocol） 是一種開放標準，主要用於把大型語言模型（LLM）與外部工具或資料源相連接。透過 MCP，AI 可以以結構化的方式呼叫工具、取得回應、整合外部狀態。
Chrome DevTools MCP 則是 MCP 協議的一個具體實現，使 AI 能夠呼叫 Chrome DevTools 的功能（如記錄性能追蹤、檢查 DOM、觀察 Network／Console 等）來輔助開發與偵錯。

換句話說，Chrome DevTools MCP 扮演了一個橋梁角色，讓 AI Agent 能夠進入瀏覽器執行環境、取得實時資料，而不只是對程式碼做靜態推論。

核心功能與典型用例

以下是 DevTools MCP 支援的主要能力，以及在哪些情境下特別有幫助：

開始與停止性能追蹤（performance_start_trace / performance_stop_trace）
AI 可以透過瀏覽器實地量測網站性能，抓取追蹤檔案，進而分析優化建議。
分析性能見解（performance_analyze_insight）
AI 可以從追蹤資料中提取見解，例如「哪個資源讀取太慢」、「某段 JavaScript 執行瓶頸在哪」。
導航與頁面操作（navigate_page、new_page、wait_for 等）
AI 可在瀏覽器中自動跳轉頁面、等待條件滿足、操作複雜流程。
模擬使用者行為（click、fill、hover、drag…）
AI 可以模擬按鈕點擊、表單填寫、滑鼠移動等操作，用來重現錯誤流程以便偵錯。
檢查 Network / Console 資訊
AI 可以讀取瀏覽器的網絡請求、錯誤日誌與 Console 輸出，幫助診斷 CORS 問題、資源加載錯誤、JavaScript 錯誤等。
取得截圖 / DOM 快照 / CSS / Layout 資訊
AI 可以抓取頁面快照、DOM 結構、樣式與版面資訊，協助判斷並提出版面與樣式的修正建議。

下面是幾個具體情境範例，展示 AI 編碼助手搭配 DevTools MCP 可以做什麼：

即時驗證程式碼修正
AI 幫你產生修改程式碼，接著可以自動跳到瀏覽器，驗證這些改動是否如預期生效。
調查網絡或 Console 錯誤
如果圖片無法載入、遇到 CORS 錯誤、或有 JavaScript 錯誤，AI 可以讀取網絡請求與錯誤紀錄，協助定位問題。
重現使用者行為流程以排查錯誤
AI 可以在瀏覽器中自動重現複雜流程：按鈕點擊、表單填寫、跳轉流程等，觀察錯誤發生時的環境狀態。
偵錯樣式 / 版面異常
AI 可以連接到正在運行的頁面，檢視 DOM、CSS、樣式計算等，就現場狀態給出具體修改建議。
自動化性能審計
AI 可以要求 DevTools MCP 執行性能追蹤，然後根據分析結果提出優化策略，例如縮減加載、資源壓縮、排除長任務。

如何開始使用（設定與整合）

如果你想嘗試這個工具，下面是一般的使用流程與注意事項：

設定方式（以 MCP 客戶端整合為例）

在你的 MCP 客戶端設定檔中加入 Chrome DevTools MCP 的設定，例如：

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

這樣 AI 客戶端就能呼叫 MCP 伺服器來啟動 Chrome DevTools MCP。

向 AI 編碼助手下指令，例如：

Please check the LCP of web.dev.

AI 助手就會透過 MCP 呼叫 performance_start_trace、performance_stop_trace、再進行結果分析。

如有錯誤或需要協助，可以查看官方 GitHub 文檔或發 issue。 Chrome 團隊也鼓勵社群貢獻與回饋。

注意事項與限制

Chrome DevTools MCP 現階段為公開預覽版本，功能還在逐步擴展中。
MCP 伺服器後端多以 Puppeteer 為基底，用來自動化瀏覽器操作，並處理等待、同步等機制。
需要支援 Node.js（通常 Node.js 22 版本以上）以及可用的 Chrome 瀏覽器版本。
在某些操作系統、沙箱環境或安全限制上，啟動 Chrome 或允許調試協議可能會受限。這在未來版本可能會改善。

意義與未來展望

Chrome DevTools MCP 的推出，有幾個值得關注的意義：

閉環式開發 / 偵錯流程
AI 不再只是產生程式碼，而能在真實瀏覽器中「看到」程式的表現、測試效果，進而調整與優化。這強化了 AI 輔助開發的可靠性與效率。
AI 驅動的前端優化
傳統前端優化往往仰賴工程師執行性能分析工具、閱讀追蹤檔案。現在 AI 可以自動生成建議，減輕人力負擔。
工具整合與生態擴展
MCP 是一個開放協議，未來不僅限於 Chrome DevTools，一些其他瀏覽器工具、前端框架或自訂工具都可能透過 MCP 整合到 AI 工作流程中。
社群共創與演進空間
目前為公開預覽版本，Chrome 團隊鼓勵開發者與 AI 工具商提供回饋和功能需求。未來 MCP 的功能與穩定性有很大成長空間。