Chrome DevTools MCP 安全設定：隔離瀏覽器並限制 Agent 權限
Chrome DevTools MCP 能讓 Codex、Claude 等 coding agent 開啟 Chrome、查看網頁並使用 DevTools 除錯；同一個能力也會把該瀏覽器的內容交給 agent。先用獨立的暫存 Chrome profile，再關閉不需要的 JavaScript 評估、網址範圍與遙測；不要直接把登入中的日常瀏覽器交給 agent。
這不代表連接 MCP 必然會洩漏資料；而是官方文件明確指出：連接的 agent 能讀取、檢查、除錯和修改瀏覽器或 DevTools 中的資料；若瀏覽器有已登入 session，agent 也可能代表你操作那些頁面。以下設定以本機開發站為例，指令來自 Chrome DevTools 官方設定文件；本文沒有在本機安裝或執行 MCP server。
Codex 設定：預設使用獨立 Chrome profile
Chrome DevTools for agents 官方安裝頁提供 Codex 的 MCP 指令。執行前需安裝 Node.js LTS、npm 和目前穩定版 Chrome。若只需要檢查本機 Astro 預覽站，可在 Codex CLI 加入下列 server：
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --isolated --no-javascript-evaluation --allowed-url-pattern 'http://localhost:4321/*' --no-usage-statistics --no-performance-crux這份範例組合了幾個不同控制，使用前要知道它們各自會改變什麼：
| 參數 | 用途 | 代價或邊界 |
|---|---|---|
--isolated | 以暫存 user data directory 啟動 Chrome，瀏覽器關閉後清理 | 不會隔離 MCP server 或 agent 的其他工具權限 |
--no-javascript-evaluation | 不提供由 MCP 工具發起的 JavaScript 評估，包含導覽和初始化腳本情境 | 不會停用網頁本身的 JavaScript，也不會阻止所有其他 DevTools 操作 |
--allowed-url-pattern | 只允許符合 URLPattern 的導覽與子資源；範例只允許 localhost:4321 | 若你的 app 還會呼叫 API、載入其他 origin，必須把必要網址也加入 allow-list |
--no-usage-statistics | 停用 Chrome DevTools MCP 的使用統計 | 只管這個 MCP server 的統計，不是 Chrome 本身的瀏覽器指標 |
--no-performance-crux | 不把 performance trace URL 傳送至 Google CrUX 查詢真實使用者體驗資料 | agent 不會取得這項 CrUX 補充資料 |
--allowed-url-pattern 是 Chrome 149 以上支援的設定。若你的 app 使用不同 port 或 API origin，先對照官方設定表，只加上這次除錯必須造訪的 origin。範例 URL 用來測試本機網站，不代表所有專案都只有 localhost 一個來源。
為什麼不要重用平常登入的 Chrome
隔離 profile 是這篇建議的第一個檢查點。MCP server 預設會使用自己的 Chrome profile；明確加上 --isolated 後，會建立一次性 user data directory，Chrome 關閉後清掉。不要為了方便改成連線到你平常登入的瀏覽器，尤其是含有個人信箱、雲端控制台、公司後台或付款資訊的 profile。
這個選擇也會讓你無法直接重用自己的 cookie 和登入狀態。需要登入才能檢查時，建立專用測試帳號，或在測試環境提供最低權限的 session；不要將日常帳號當成除錯捷徑。Chrome 官方在 2026-09-22 的 DevTools 更新也補上 JavaScript 評估控制、lazy-load source maps、PWA automation 和 heap snapshot 查詢等 agent 能力，工具愈多，仍要根據任務縮小權限。
安裝後做一次無寫入驗收
重啟 Codex 後，先檢查 MCP server 是否成功連線，再請 agent 開啟本機測試頁，只回報標題、console error 和需要查看的檔案，不要點擊登入、送出表單或修改資料。接著確認：
- Chrome 開的是獨立測試 profile，而非日常 profile。
- 導覽到 allow-list 以外的網域時，請求會被限制；本機 app 必要的 API origin 已明確加入。
- 在 prompt 要求 agent 執行 JavaScript 時，MCP 不會提供被關閉的評估工具。
- performance trace 沒有 CrUX 查詢；使用統計也已依你的政策關閉。
- 最後再讓 agent 針對指定畫面跑一次操作，並檢視它回報的 console、network 與實際程式碼 diff。
若 JavaScript 評估是特定除錯工作真正需要的工具，才在可信任的測試專案中移除該限制；把網址範圍和臨時 profile 保留。停用某項工具不會讓 agent 的其他 DevTools 能力或 MCP server 的其他權限自動消失。更多 agent 交付檢查方式可參考AI coding agent 完成結果驗證流程。
參考資料：
Chrome for Developers：New in DevTools — October 2026（2026-09-22）
Chrome for Developers：Get started with Chrome DevTools for agents