Chrome DevTools MCP 中文指南：讓 AI Agent 操作與除錯 Chrome

Chrome DevTools MCP 是 ChromeDevTools 維護的開源 MCP server，讓 Codex、Claude Code、Cursor 等 coding agent 操作並檢查正在執行的 Chrome。它適合用來讀取 console 與網路請求、擷取畫面、操作頁面，以及執行效能 trace。本文依官方 repository、設定文件與 v1.8.0 release 整理，沒有在本次內容作業中完成端到端安裝測試。

它適合解決什麼問題

當 coding agent 只能讀程式碼時，它看不到頁面實際呈現、瀏覽器錯誤與請求結果。Chrome DevTools MCP 把這些瀏覽器能力提供成工具，讓 agent 可以打開頁面、點擊與輸入、查看 console message、檢查 network request、擷取 screenshot，或記錄 performance trace。

它比較適合開發與除錯流程，例如確認表單送出後的請求、找出前端 console error、檢查頁面在不同 viewport 的狀態，或取得 LCP、INP、CLS 相關的效能線索。固定而大量的端到端測試仍需要明確斷言、測試資料和穩定的測試程式；單純接上 MCP 不會自動產生可靠的測試規格。

使用前需要準備什麼

Node.js LTS、npm，以及目前穩定版 Chrome 或更新版本。
支援 MCP 的 coding agent，例如 Codex、Claude Code、Cursor 或 VS Code。
一個適合檢查的測試頁面。不要先用已登入私人帳號或含敏感資料的日常瀏覽器環境。

官方目前保證支援 Google Chrome 與 Chrome for Testing。其他 Chromium 瀏覽器可能可用，但不在相同支援承諾內。截至 2026-09-07，GitHub Releases 顯示最新正式版為 v1.8.0，發布於 2026-08-25。

在 Codex 或 Claude Code 加入 MCP

Codex CLI 的官方設定指令是：

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Claude Code 可以使用：

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Windows 11 若無法正常啟動，官方文件另外提供以 cmd /c npx -y chrome-devtools-mcp@latest 啟動、設定 Chrome 路徑環境與提高啟動等待時間的範例。不同 agent 的設定位置不同，應以官方 Client Configurations 文件為準。

@latest 會跟隨最新版，適合先試用；需要可重現環境時，可將套件固定到已核對的版本並自行安排更新檢查。

第一次如何確認它可用

加入設定後重新載入 MCP client，請 agent 檢查一個沒有敏感資料的公開測試頁，例如要求它檢查 https://developers.chrome.com 的效能。官方說明指出，MCP server 連線完成時不一定立刻啟動瀏覽器；第一次呼叫需要瀏覽器的工具後，才會啟動 Chrome。

先確認三件事：agent 能列出或開啟頁面、能讀到頁面的 snapshot 或 console、能完成一項明確任務並回傳可核對結果。若只需要導航、執行 script 與 screenshot，可使用 --slim --headless 減少暴露的工具數量。

資料、權限與隔離風險

這個 MCP 可以把瀏覽器內容交給 MCP client，也能除錯和修改頁面資料。不要讓未受信任的 client 接觸已登入的信箱、公司後台或個人帳號。初次使用可加上 --isolated，讓工具建立暫時的 Chrome user-data directory，瀏覽器關閉後自動清理。

官方文件指出，用量統計預設開啟；可用 --no-usage-statistics 關閉。效能工具也可能把 trace 中的網址送到 Google CrUX API 取得真實使用者資料，可用 --no-performance-crux 關閉。若任務只需要特定網站，可以研究 --allowed-url-pattern 等限制，但要先確認目前 Chrome 版本符合官方需求。

網路請求工具可能讀到 Cookie 或其他敏感 header。設定中的 --redact-network-headers 可以遮蔽部分被視為敏感的 header，仍不能取代乾淨測試帳號與最小權限環境。

什麼情況不一定需要它

如果工作只需要呼叫穩定 API，直接使用 API 通常更容易驗證；如果已有成熟的 Playwright 測試，Chrome DevTools MCP 可用於探索與診斷，不必重做既有斷言。它的特色是讓 agent 取得瀏覽器當下狀態與 DevTools 診斷能力，而不是代替所有瀏覽器測試工具。

官方來源

License：Apache-2.0。版本、參數與支援環境可能更新，實際安裝前請再核對官方文件。