Browser Tools

🚀 瀏覽器工具（BrowserTools）

BrowserTools 是一款強大的瀏覽器工具，可即時監控 XHR 請求與響應、控制檯日誌，還具備網絡流量分析、DOM 元素截取等功能，能無縫集成到開發流程，提升工作效率。

🚀 快速開始

安裝並配置完成後，兼容的 MCP 客戶端就能使用 BrowserTools 進行瀏覽器行為分析，如監控控制檯輸出、捕獲網絡流量等。具體安裝步驟請參考官方文檔。

✨ 主要特性

• 瀏覽器擴展：即時監控 XHR 請求/響應和控制檯日誌。
• 網絡流量分析：深入洞察網絡交互。
• DOM 元素截取：輕鬆獲取頁面元素信息。
• 截圖功能：隨時捕獲網頁界面。
• 日誌清理：便捷清除存儲的日誌數據。

📦 安裝指南

請參考我們的官方文檔：

• 瀏覽器工具 MCP 文檔

🔧 技術細節

系統由三個核心組件構成：

1. Chrome 擴展：
   • 即時捕獲並傳輸截圖、日誌和 DOM 元素到 Node 服務器。
   • 連接 WebSocket 通道以實現截圖功能。
   • 支持用戶自定義 token 截斷限制和截圖存儲路徑。
2. Node 服務器：
   • 作為 Chrome 擴展與 MCP 服務之間的中間件。
   • 智能處理日誌截斷和重複對象數量，避免 token 超限。
   • 響應 MCP 客戶端的請求，執行截圖、日誌採集等操作。
3. MCP 服務器：
   • 實現模型上下文協議（Model Context Protocol）。
   • 提供統一接口支持多種 AI 編輯器和工具客戶端。
   • 兼容 Cursor、Cline、Zed 等主流 MCP 客戶端。

💻 使用示例

基礎用法

以下是一些示例查詢，展示瞭如何使用 BrowserTools 解決不同場景下的問題：

// 診斷頁面加載問題
"為什麼這個頁面加載得這麼慢？"

// 開發模式下的網絡分析
"幫我分析一下這張圖片的加載情況。"

// DOM 元素信息獲取
"告訴我當前選中元素的所有屬性。"

// 快速截圖驗證
"給我看看當前頁面的狀態。"

📚 詳細文檔

使用說明

一旦安裝並配置完成，系統將允許任意兼容的 MCP 客戶端執行以下操作：

• 監控瀏覽器控制檯輸出
• 捕獲網絡流量數據
• 截取網頁界面快照
• 分析選定 DOM 元素
• 清理存儲的日誌記錄
• 執行無障礙性、性能、SEO 和最佳實踐審計

兼容性

• 支持所有主流 MCP 兼容客戶端。
• 專門針對 Cursor IDE 進行優化設計。
• 提供對其他 AI 編輯器和工具的廣泛支持。

通過 BrowserTools，您可以無縫集成瀏覽器行為分析功能到各類開發流程中，極大提升工作效率。