工具連接（MCP）
Chrome DevTools MCP
讓 AI 查看 Chrome 中的網頁問題，幫助查錯誤和分析加載速度。
內容介紹
少裝一點整理 · 依據項目公開文件
網頁報錯、顯示異常或加載慢時，這個工具把 Chrome 的開發者檢查能力提供給 AI。開發者可以讓它檢查頁面資訊、查看瀏覽器中的問題，並輔助分析性能。使用前需要準備 Chrome 和支持 MCP 的 AI 助手；它提供排查線索，不代表一次檢查就能證明整個網站沒有問題。
開始使用
先核對使用條件，再選擇你的 AI 助手查看接入步驟。
- 需要準備
- Node.js 長期支持版和 npm。
- 官方支持的 Chrome 或 Chrome for Testing 瀏覽器。
- 費用說明
- 項目程式碼開放原始碼；AI 助手的使用費用與第三方服務額度另計。
- 需要的權限
- 可查看和操作瀏覽器內容；預設啓用使用統計，性能工具也可能發送頁面地址獲取 CrUX 資料。官方 README 提供關閉方法。
Codex有官方接入說明
項目的客戶端指南包含 Codex 的配置方法。
接入步驟
- 確認電腦上已有 Node.js 長期支持版、npm 和 Chrome。
- 打開客戶端指南的 Codex 小節，按說明添加 MCP。
- 重新打開助手；首次調用瀏覽器工具時才會啓動 Chrome。
怎樣確認接入有效
檢查一個公開頁面的控制台錯誤，讓它說明實際找到的錯誤或沒有找到。
官方依據
Claude Code有官方接入說明
項目的客戶端指南包含 Claude Code 的配置方法。
接入步驟
- 確認電腦上已有 Node.js 長期支持版、npm 和 Chrome。
- 打開客戶端指南的 Claude Code 小節，按說明添加 MCP。
- 重新打開助手；首次調用瀏覽器工具時才會啓動 Chrome。
怎樣確認接入有效
檢查一個公開頁面的控制台錯誤，讓它說明實際找到的錯誤或沒有找到。
官方依據
Cursor有官方接入說明
項目的客戶端指南包含 Cursor 的配置方法。
接入步驟
- 確認電腦上已有 Node.js 長期支持版、npm 和 Chrome。
- 打開客戶端指南的 Cursor 小節，按說明添加 MCP。
- 重新打開助手；首次調用瀏覽器工具時才會啓動 Chrome。
怎樣確認接入有效
檢查一個公開頁面的控制台錯誤，讓它說明實際找到的錯誤或沒有找到。
官方依據
官方依據
接入說明核對於 2026-10-12 · 依據公開文件整理，未逐一安裝實測。
可以怎麼用
- 檢查網頁內容與瀏覽器問題
- 輔助分析頁面加載和性能
- 先準備 Chrome，再按文件連接 AI 助手
官方項目與文件
專案說明譯文
面向編程助手的 Chrome DevTools
用途相近的外掛
優先匹配當前外掛的主要用途，再參考共同用途和收藏數；接入方法可能不同。
- Playwright MCP — 讓 AI 打開網頁、點擊按鈕和填寫表單，幫助檢查網站流程。
- BrowserTools MCP — 把當前 Chrome 頁面的錯誤、網路請求和截圖交給 AI 排查。
- ExecuteAutomation Playwright MCP — ExecuteAutomation Playwright MCP: 操作瀏覽器中的網頁 (透過支援 MCP 的 AI 助手).