Browser Tools MCP 工具 介紹
本篇文章將 會涵蓋以下重點：
- 什麼是 Browser Tools MCP？
- 如何安裝與快速啟動？
- 各種 Audit Tools 的實際應用方式
- 架構說明與運作原理
- 常見問題與注意事項
在 AI 助手越來越普及的今天，如何讓 AI 直接存取瀏覽器的 Console、Network、DOM，甚至自動執行 Lighthouse 稽核，已經成為開發者提升效率的關鍵。這邊會帶你一步步了解並實作！
什麼是 Browser Tools MCP？
Browser Tools MCP 是一套讓 AI 助手（例如 Cursor、Claude Desktop 等）能夠即時存取瀏覽器資料的工具組。它結合 Chrome 擴充套件、NodeJS 伺服器與 MCP 標準協議，讓 AI 可以「看見」你的瀏覽器畫面、Console log、Network 請求，甚至自動截圖與執行稽核。
換句話說，這個工具就是讓 AI 助手能夠像人一樣「觀察」與「操作」你的瀏覽器，並且回傳結構化的分析結果。
安裝與快速啟動
步驟一：安裝 Chrome 擴充套件
請先下載並安裝官方提供的 Chrome 擴充套件：
BrowserToolsMCP Chrome Extension v1.2.0
步驟二：安裝 MCP 伺服器
在你的 IDE 終端機輸入以下指令：
npx @agentdeskai/browser-tools-mcp@latest
步驟三：啟動本地 Node 伺服器
開啟新終端機視窗，執行：
npx @agentdeskai/browser-tools-server@latest
需特別留意：
這兩個伺服器必須同時啟動，否則功能無法正常運作！
問題排解小技巧
- 完全關閉 Chrome（不只是關閉視窗，而是結束所有進程）
- 重新啟動本地 Node 伺服器
- 確認只開啟一個 DevTools 面板
常見問題與排解
如果遇到無法連線，請嘗試上述步驟。如果還是不行，歡迎在 Github 開 issue 或聯絡作者 @tedx_ai on x。
如何使用 Audit Tools?
問題：如何檢查網頁的無障礙（Accessibility）？
你可以直接在 MCP 客戶端輸入：
"Run an accessibility audit."
系統會自動執行 WCAG 標準檢查，並回傳結構化 JSON 結果。
問題：怎麼檢查效能、SEO、最佳實踐？
同理，分別輸入：
"Run a performance audit."
"Run an SEO audit."
"Run a best practices audit."
建議操作：
你也可以直接輸入 "Run audit mode." 一次執行所有稽核！
問題：NextJS 專案有什麼特別稽核？
如果你是 NextJS 使用者，可以輸入：
"Run a NextJS audit."
系統會針對 NextJS SEO 與最佳實踐進行檢查。
問題：什麼是 Debugger Mode？
輸入 "Enter debugger mode."，系統會自動執行一連串除錯工具，協助你快速定位問題。
架構與運作原理
這套系統主要由三大核心組件組成：
- Chrome 擴充套件：負責擷取瀏覽器畫面、Console log、Network 活動與 DOM 元素。
- Node 伺服器：作為中介，負責溝通 Chrome 擴充套件與 MCP 伺服器。
- MCP 伺服器：提供標準化工具，讓 AI 客戶端（如 Cursor、Claude Desktop 等）能夠互動。
┌─────────────┐ ┌──────────────┐ ┌───────────────┐ ┌─────────────┐
│ MCP Client │ ──► │ MCP Server │ ──► │ Node Server │ ──► │ Chrome │
│ (e.g. │ ◄── │ (Protocol │ ◄── │ (Middleware) │ ◄── │ Extension │
│ Cursor) │ │ Handler) │ │ │ │ │
└─────────────┘ └──────────────┘ └───────────────┘ └─────────────┘
支援的功能與相容性
- 監控 Console 輸出
- 擷取 Network 流量
- 截圖
- 分析選取元素
- 清除 MCP 伺服器日誌
- 執行 Accessibility、Performance、SEO、Best Practices 各類稽核
- 支援多種 MCP 客戶端，主要設計給 Cursor IDE，也可用於其他 AI 編輯器