Browser Tools

🚀 Browser Tools

Browser Tools is a powerful utility that enables real - time monitoring of browser activities, network traffic analysis, and more, enhancing the efficiency of development workflows.

🚀 Quick Start

Once installed and configured, the system allows any compatible MCP client to perform the following operations:

• Monitor browser console output.
• Capture network traffic data.
• Take snapshots of web pages.
• Analyze selected DOM elements.
• Clear stored log records.
• Conduct accessibility, performance, SEO, and best - practice audits.

✨ Features

• Browser Extension: Real - time monitoring of XHR requests/responses and console logs.
• Network Traffic Analysis: In - depth insights into network interactions.
• DOM Element Interception: Easily obtain information about page elements.
• Screenshot Function: Capture web page interfaces at any time.
• Log Cleaning: Conveniently clear stored log data.

📦 Installation

Refer to our official documentation:

• Browser Tools MCP Documentation

🔧 Technical Details

The system consists of three core components:

1. Chrome Extension:

   • Capture and transmit screenshots, logs, and DOM elements to the Node server in real - time.
   • Connect to the WebSocket channel for the screenshot function.
   • Support user - defined token truncation limits and screenshot storage paths.

2. Node Server:

   • Act as middleware between the Chrome extension and the MCP service.
   • Intelligently handle log truncation and the number of duplicate objects to avoid token over - limits.
   • Respond to requests from MCP clients to perform operations such as screenshot taking and log collection.

3. MCP Server:

   • Implement the Model Context Protocol (MCP).
   • Provide a unified interface to support various AI editors and tool clients.
   • Be compatible with mainstream MCP clients such as Cursor, Cline, and Zed.

💻 Usage Examples

Basic Usage

// Diagnose page loading issues
"为什么这个页面加载得这么慢？"

// Network analysis in development mode
"帮我分析一下这张图片的加载情况。"

// Obtain DOM element information
"告诉我当前选中元素的所有属性。"

// Quick screenshot verification
"给我看看当前页面的状态。"

Advanced Usage

// You can combine multiple operations according to your needs, for example, first analyze the network traffic and then take a screenshot for verification.

📚 Documentation

Compatibility

• Supports all major MCP - compatible clients.
• Specifically optimized for the Cursor IDE.
• Provides extensive support for other AI editors and tools.

With Browser Tools, you can seamlessly integrate browser behavior analysis capabilities into various development processes, greatly improving work efficiency.