项目简介

Browser Inspector MCP 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在为支持 MCP 协议的 AI 客户端（如 Cursor）提供强大的浏览器控制和调试能力。通过 Browser Inspector MCP，AI 应用可以方便地启动、管理浏览器实例，获取页面信息，操作 DOM 元素，监控网络请求，以及进行性能分析等。

主要功能点

浏览器控制：启动、关闭和管理 Chrome 浏览器实例。
DOM 审查：查询、审查和操作网页 DOM 元素，获取元素属性和样式。
控制台日志：实时捕获和分析浏览器控制台输出的日志信息。
网络监控：拦截、分析和修改浏览器发出的网络请求。
页面快照与截图：获取页面完整快照（MHTML）和各种格式的页面截图。
性能分析：收集和分析页面加载和运行时性能指标。
用户输入模拟：模拟键盘输入、鼠标事件、文件上传和滚动等用户操作。
Prompt模板支持：内置多种 Prompt 模板，方便 AI 应用进行浏览器交互。

安装步骤

前提条件：确保已安装 Node.js (>=16.0.0) 和 Chrome 浏览器。

克隆仓库：

git clone https://github.com/programmerguys/mcp_dev_node.git

进入项目目录：
```
cd mcp_dev_node
```
安装依赖：
```
npm install
```

服务器配置

MCP 客户端需要配置以下信息以连接到 Browser Inspector MCP 服务器：

{
  "serverName": "Browser Inspector MCP",
  "command": "npm",
  "args": ["start"],
  "capabilities": {
    "resources": {},
    "tools": {},
    "prompts": {}
  },
  "description": "Browser control and inspection service"
}

参数说明：

'serverName': MCP 服务器的名称，用于在客户端显示，例如 "Browser Inspector MCP"。
'command': 启动 MCP 服务器的命令，这里使用 'npm'。
'args': 启动命令的参数，这里使用 '["start"]'，对应 'npm start' 命令，用于启动服务器。
'capabilities': 声明服务器提供的能力，包括 'resources'（资源）、'tools'（工具）和 'prompts'（Prompt 模板），此处为空对象，表示启用所有类型的功能。
'description': MCP 服务器的描述信息，用于在客户端展示服务器功能简介。

基本使用方法

启动服务器：在项目根目录下运行命令 'npm start' 或 'npm run debug' (调试模式)。
连接 MCP 客户端：在支持 MCP 协议的 AI 客户端（如 Cursor）中，配置上述服务器配置信息，并连接到本地 MCP 服务器。
使用工具和资源：连接成功后，即可在 AI 客户端中使用 Browser Inspector MCP 提供的各种工具（如 'launch_browser', 'inspect_dom', 'execute_js' 等）和资源（如 'browser://instances', 'browser://{instanceId}/logs' 等），控制浏览器并获取信息。
查阅帮助文档：可以通过访问资源 'static://help' 或 'browser://index' 获取更详细的使用说明和资源索引。

关键词

项目简介

主要功能点

安装步骤

服务器配置

基本使用方法

信息