BrowserTools MCP 專案

MCP工具

BrowserTools MCP 專案

BrowserTools MCP 是一個功能強大的模型內容協定 (MCP) 伺服器，其核心目標是將 AI 助理（如 Cursor）與您的網頁瀏覽器深度整合，讓 AI 能夠「看見」並「分析」瀏覽器中正在發生的事情。它極大地增強了 AI 工具對前端應用程式的感知和互動能力，使其成為一個強大的前端開發與偵錯夥伴。

核心架構與運作方式

這個專案的架構由三個關鍵元件協同運作，構成一個完整的通訊鏈：

1. Chrome 擴充功能 (Chrome Extension)：
   這是安裝在使用者 Chrome 瀏覽器中的「感測器」。它負責即時捕捉瀏覽器分頁的各種活動，包括主控台日誌 (Console Logs)、網路請求 (Network Activity)、DOM 元素，並能夠執行螢幕截圖等操作。

2. 本地節點伺服器 (browser-tools-server)：
   這是一個在使用者電腦上獨立運行的 Node.js 中介伺服器。它作為擴充功能和 MCP 伺服器之間的橋樑，接收來自擴充功能的原始資料，進行智慧處理（如截斷過長的日誌、移除敏感標頭），並等待來自 MCP 伺服器的指令。

3. MCP 伺服器 (browser-tools-mcp)：
   這是使用者需要安裝到其 AI IDE（如 Cursor）中的元件。它遵循 MCP 協定，向 AI 助理提供一系列標準化的工具，讓 AI 能夠請求瀏覽器資料或執行分析任務。

整個工作流程為：[AI 用戶端 (Cursor)] <-> [MCP 伺服器] <-> [Node.js 伺服器] <-> [Chrome 擴充功能]。

主要功能與工具集

BrowserTools MCP 賦予 AI 助理一系列強大的前端分析能力：

• 即時監控：可以直接從 IDE 中，要求 AI 獲取當前瀏覽器分頁的主控台輸出或網路流量，極大地方便了前端偵錯。
• 螢幕截圖與 DOM 分析：可以命令 AI 對當前頁面進行截圖，或分析使用者在開發者工具中選定的 DOM 元素。
• 專業級網站稽核 (Lighthouse Audits)：這是該專案的一大亮點。它整合了 Google 的 Lighthouse 和 Puppeteer 工具，讓 AI 能夠直接對當前頁面執行專業的網站稽核，包括：
  • 無障礙性 (Accessibility)：檢查是否符合 WCAG 等無障礙標準。
  • 效能 (Performance)：分析載入速度、資源阻塞等效能瓶頸。
  • 搜尋引擎優化 (SEO)：評估頁面的 SEO 體質。
  • 最佳實踐 (Best Practices)：檢查是否遵循通用的網頁開發最佳實踐。
  • Next.js 專屬稽核：提供針對 Next.js 應用的特定優化建議。
• 整合模式 (Audit Mode, Debugger Mode)：提供一鍵執行一系列相關稽核或偵錯工具的複合模式，簡化了全面分析的流程。

總結來說，BrowserTools MCP 徹底打通了程式碼編輯器與瀏覽器執行環境之間的隔閡。它讓 AI 助理不再只是一個只能看到靜態程式碼的工具，而是變成了一個能夠觀察應用程式即時狀態、分析效能瓶頸、並提供專業優化建議的智慧前端開發助理。

• MCP平台來源: github
• 連結: https://github.com/AgentDeskAI/browser-tools-mcp

立即試用MCP工具