BrowserTools MCP 是什麼？
BrowserTools MCP 是一套連結瀏覽器和 AI 驅動的應用程式或編輯器的系統。它利用 Chrome 擴展、本地 NodeJS 伺服器和 MCP 伺服器，使語言模型和編程代理能夠訪問瀏覽器日誌、DOM 詳情、截圖、網絡請求，並執行可訪問性、性能、SEO 和最佳實踐的自動化審核。所有操作均在你的機器上進行，以保護隱私。
如何配置
- 安裝 Chrome 擴展： 從 發布頁面 下載並添加 BrowserTools MCP Chrome 擴展到你的瀏覽器。
- 設置 MCP 伺服器： 在 IDE 或 MCP 兼容的客戶端中運行：
npx @agentdeskai/browser-tools-mcp@latest - 運行本地 Node 伺服器： 打開一個獨立的終端並執行：
npx @agentdeskai/browser-tools-server@latest - 啟用擴展面板： 打開 Chrome DevTools，導航至 BrowserToolsMCP 面板，並確保它是活動的。
- 檢查連接性： 確保只有一個 DevTools 面板實例是開啟的。如有必要，重新啟動瀏覽器和伺服器以進行故障排除。
- 配置選項： 使用擴展的選項來設置截圖文件夾、令牌/截斷限制和隱私偏好。
如何使用
- 完成配置並運行所有組件後，使用你的 MCP 兼容編輯器或代理（如 Cursor）啟動審核、捕捉日誌、截圖或與頁面元素互動。
- 常見用途包括要求 AI 代理進行可訪問性審核、性能分析、SEO 審核或代碼除錯——直接針對當前在瀏覽器中打開的網頁。
- 結果會在你的 IDE 或代理環境中顯示，並且是從你的瀏覽器會話即時獲取的，可以通過自然語言或函數調用來提示。
主要功能
- 無縫的即時訪問瀏覽器日誌、網絡活動和截圖的能力，供 AI 工具使用。
- 基於 Lighthouse 的自動化可訪問性（WCAG）、性能、SEO、最佳實踐和 NextJS 特性的審核。
- 本地優先：所有瀏覽器數據都在你的機器上處理和存儲——不會將信息發送給第三方。
- 除錯器和審核模式可透過一個命令協調深入檢查的序列。
- 結構化的 JSON 結果適合代理工作流。
- 靈活的配置和穩健的跨平台連接。
- 通過擴展面板一鍵管理日誌和截圖。
使用案例
- 自動化可訪問性驗證： 確保你團隊建立的每個頁面符合可訪問性標準，通過開發過程中以程式化方式運行審核。
- 性能調整： 在發佈代碼之前，檢測瓶頸和未優化的資源，IDE 中提供可行的建議。
- SEO 和最佳實踐分析： 立即檢查頁面上的 SEO 和代碼最佳實踐，以最大化搜索能見度和網站健康。
- 瀏覽器除錯： 在測試案例或錯誤重現過程中捕捉日誌、網絡跟踪和截圖，並分享上下文豐富的報告。
- 持續的代碼質量： 通過在你的 MCP 兼容工具中編寫自動檢查，將審核集成到 CI/CD 流程中。
常見問題
問：BrowserTools MCP 會將任何瀏覽器數據發送到外部伺服器嗎？
不會。所有日誌、截圖和診斷數據都存儲在本地，從不傳送到第三方服務。隱私和安全性得到嚴格保護。
問：我可以與 BrowserTools MCP 一起使用哪些 AI 編輯器或代理？
任何支持模型上下文協議（MCP）的編輯器或工具，如 Cursor、Claude Desktop、Zed 或 Cline，都可以利用 BrowserTools MCP 的功能。
問：我遇到連接問題，應該檢查什麼？
首先，確保 NodeJS 伺服器和 MCP 伺服器都在運行，並且只有一個Chrome DevTools 面板實例是活動的。如果問題仍然存在，請完全關閉並重新啟動 Chrome 和所有伺服器，然後重新打開 DevTools。