Chrome DevTools MCP 怎麼安裝：用 Codex、Claude Code 偵錯網頁網路、主控台與效能

Sun, 12 Jul 2026 12:13:00 +0800

Chrome DevTools MCP 不是讓 Agent 隨意「代點網頁」的工具。它將 Chrome DevTools 的網路請求、主控台訊息、截圖、效能 trace 與頁面自動化能力，透過 MCP 交給 coding agent；更適合處理「頁面為何白屏」「介面為何 401」「點擊後為何沒反應」「效能為何突然變慢」這類可驗證的問題。

它可搭配如何排查 MCP 工具呼叫失敗使用：先確認 MCP 程序與權限正常，再讀取瀏覽器中的實際證據。官方儲存庫說明它支援即時 Chrome 檢查、自動化、偵錯與效能分析，也特別提醒 MCP 用戶端能看到瀏覽器資料。官方儲存庫

先確認適用情境

適合使用的情況：

Agent 需要讀取 console error、network request、截圖或效能 trace；
你要重現一個已能在 Chrome 中看見的前端問題；
需要將「頁面表現」轉成可定位的請求、選擇器或堆疊資訊；
測試站點、測試帳號與正式帳號已隔離。

不適合把它當成無人值守的正式環境操作器。瀏覽器可能含有登入狀態、客戶資料、付款頁或內部系統；請先使用獨立的 Chrome profile 與低權限測試帳號。

Codex 與 Claude Code 的最小安裝

Codex CLI 可新增 MCP server：

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

Claude Code 可使用：

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

安裝後重啟對應用戶端，再讓 Agent 做一項低風險驗證，例如「開啟測試頁，列出主控台錯誤與失敗的網路請求」。不要一開始就交付「登入後台並修改資料」這類工作。

若 Windows 在 npx 啟動後找不到 Chrome，或 MCP 初始化太慢，可在 .codex/config.toml 明確使用 cmd 並提高逾時：

[mcp_servers.chrome-devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest"]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

依證據排錯，不讓 Agent 猜測

建議固定以下順序：

頁面與截圖：確認開啟的是目標環境、目標帳號與目標路由。
主控台：記錄第一條 error 的完整文字及 source-mapped stack，而非只看紅色數量。
網路：篩選 4xx、5xx、CORS、長時間 pending 的請求，檢查 URL、請求本文與回應摘要。
互動重現：讓 Agent 只做一次點擊或填寫動作，然後再次檢視網路與 console。
效能：問題穩定重現後再錄製 trace，避免把暫時性網路抖動誤判成渲染問題。

可直接給 Agent 一條邊界明確的任務：

1
2
3

僅在 http://localhost:3000 重現「提交後頁面空白」。
先截圖，再列出主控台 error 與失敗網路請求；不要修改頁面、不要送出表單、不要存取其他網域。
輸出請依「現象、證據、最可能原因、下一步人工驗證」四項組織。

常見失敗與處理

現象	優先檢查
MCP 已新增但工具不可用	重啟用戶端，檢查 `npx`、Node.js 與 MCP 設定是否在目前作用域生效。
無法連線既有 Chrome	確認偵錯連接埠與 `--browser-url` 一致；不要假設工具會自動接管已開啟的瀏覽器。
看到了不該看的頁面資料	立即關閉該 profile，改用獨立測試 profile，並縮小 Agent 任務範圍。
效能報告不穩定	固定頁面、網路條件與重現步驟，多次取樣後再比較。

官方預設會蒐集工具呼叫成功率、延遲與環境等使用統計；若環境要求關閉，可傳入 --no-usage-statistics。效能分析也可能讀取 CrUX 資料，可視需要使用 --no-performance-crux。這些不是「排錯失敗」，而是上線前應明確決定的隱私與網路邊界。

小結

Chrome DevTools MCP 最適合將 Agent 的網頁偵錯，從「看截圖猜原因」變成依 console、network、trace 提出證據。先隔離瀏覽器身分，再將任務限制在一個環境及一個重現步驟內，最後才讓 Agent 給出修復建議。

瀏覽器偵錯 on KnightLi的博客

Chrome DevTools MCP 怎麼安裝：用 Codex、Claude Code 偵錯網頁網路、主控台與效能

先確認適用情境

Codex 與 Claude Code 的最小安裝

依證據排錯，不讓 Agent 猜測

常見失敗與處理

小結