Browser Connect MCP

这是一个模型上下文协议（MCP）服务器，使AI助手能够连接到浏览器开发者工具和后端调试器，以实现全面的全栈调试。它与任何兼容MCP的工具兼容，包括Claude Desktop、Claude Code、Cursor、Cline、Roo-Cline等！

这是什么？

Browser Connect MCP赋予AI助手以下能力：

前端调试：

• 🚀 自动启动带有调试功能的Chrome
• 🔍 读取网页上的控制台日志和错误
• 🌐 监控网络请求和API调用
• 📊 分析性能问题
• 🔒 扫描安全漏洞

后端调试（新！）：

• 📝 实时流式传输并分析后端日志
• 🐛 附加到Node.js调试器进行断点调试
• 🐳 监控Docker容器日志
• 📁 解析结构化和非结构化的日志文件
• 🔍 使用模式匹配搜索和过滤日志

AI驱动的分析：

• 🤖 前后端智能错误关联
• 💡 全栈根本原因分析
• 🎯 性能瓶颈检测
• 🛡️ 安全漏洞扫描

所有这些都通过自然对话完成——无需编码！

快速开始

1. 通过npx安装（推荐——无需安装！）

在您的AI助手的MCP配置中添加。这里是一些流行工具的例子：

重要提示： 由于MCP客户端处理命令的方式，您必须使用以下配置格式，其中npx作为命令，包名作为参数：

Claude Desktop（macOS: ~/Library/Application Support/Claude/claude_desktop_config.json，Windows: %APPDATA%\Claude\claude_desktop_config.json）：

{
  "mcpServers": {
    "browser-connect": {
      "command": "npx",
      "args": ["-y", "browser-connect-mcp"],
      "env": {
        "LOG_LEVEL": "info"
      }
    }
  }
}

注意： -y 标志确保npx运行时不提示。NPM会自动使用最新版本。

Cursor/Cline/其他MCP工具：查看您的工具文档以获取MCP服务器配置位置。

2. 重启您的AI助手

保存配置后，重启您的AI助手应用程序以加载浏览器调试功能。

3. 开始调试！

只需自然地与您的AI助手交谈：

你: "帮我调试我在localhost:3000上的网站"

AI: 我会帮你调试你的网站。让我启动带有调试功能的Chrome并连接到它。

[AI自动启动Chrome并连接]

现在我已经连接到你的浏览器。我可以查看控制台消息和网络流量。你遇到的具体问题是什么？

你: "页面加载缓慢"

AI: 让我分析一下你的页面性能...

[AI自动运行性能分析]

我发现了一些性能问题：
1. 未压缩的大图（总计3.2MB）
2. 头部的阻塞渲染JavaScript
3. 可以批量处理的多个API调用

你想详细调查这些问题中的任何一个吗？

兼容的AI助手

此MCP服务器适用于支持模型上下文协议的任何工具：

• Claude Desktop - Anthropic官方桌面应用
• Claude Code - Anthropic面向开发者的CLI
• Cursor - AI驱动的代码编辑器
• Cline - 命令行AI助手
• Roo-Cline - Cline的增强版
• 任何兼容MCP的IDE或平台

你可以问你的AI助手什么？

调试请求

• “启动Chrome并帮助我调试我的网站”
• “调试我运行在localhost:3000的应用程序” - 自动启动并连接
• “在我的默认浏览器中打开localhost:8080” - 在首选浏览器中打开
• “连接到我现有的Chrome浏览器”
• “显示任何JavaScript错误”
• “是否有失败的API调用？”
• “为什么我的页面加载缓慢？”
• “检查安全漏洞”
• “查找内存泄漏”
• “调试CORS问题”
• “导出网络流量以供分析”

性能分析

• “分析这个页面的性能”
• “哪些请求耗时最长？”
• “查找性能瓶颈”
• “显示最慢的API端点”

错误调查

• “发生了哪些错误？”
• “找到控制台中的所有TypeError”
• “显示与身份验证相关的错误”
• “这些错误是否相关？”

安全检查

• “运行安全扫描”
• “检查是否有敏感数据暴露”
• “查找安全漏洞”
• “是否有不安全的请求？”

后端调试

• “从我的Node.js服务器流式传输日志”
• “显示server.log中的后端错误”
• “附加调试器到端口9229的Node.js进程”
• “监控我的Docker容器日志”
• “在后端日志中查找所有数据库错误”
• “关联前端错误与后端日志”
• “从后端日志中显示慢API端点”

真实世界示例

示例1：调试API错误

你: “我的应用无法工作，你能帮我调试吗？”

AI: 我会帮你调试你的应用。让我连接到你的浏览器并看看发生了什么。

[自动启动/连接到Chrome]

我能看到你的应用。让我检查一下是否有任何错误...

我发现了一些问题：
1. 对/api/user的API调用返回了401未经授权的错误
2. 尝试访问支付服务时有CORS错误
3. React组件中有几个“未定义不是函数”的错误

401错误表明存在身份验证问题。你想让我：
- 查看请求头以检查身份验证令牌？
- 查找身份验证错误何时开始？
- 检查是否有任何相关的控制台错误？

示例2：性能优化

你: “用户抱怨结账页面很慢”

AI: 我会分析结账页面的性能。让我连接到你的浏览器并加载结账页面。

[连接并监控页面加载]

这是我对你的结账页面的分析结果：

性能问题：
1. 初始页面加载：4.3秒（应低于3秒）
2. 最大内容绘制：3.8秒
3. 可交互时间：5.2秒

主要瓶颈：
- 产品图片未优化（总计2.1MB）
- Stripe SDK同步加载，阻塞渲染
- 三个顺序API调用可以并行运行

建议：
1. 压缩并延迟加载产品图片
2. 异步加载Stripe SDK
3. 并行化API调用

你想让我展示导致延迟的具体网络请求吗？

示例3：安全审计

你: “你能检查我的应用是否存在安全问题吗？”

AI: 我会在你的应用上进行全面的安全扫描。

[自动扫描控制台日志和网络流量]

安全扫描结果：

⚠️ 高优先级问题：
1. 控制台日志中暴露API密钥（发现GitHub API密钥）
2. 用户密码在网络请求中可见（应使用HTTPS）
3. 缺少安全标头（CSP，X-Frame-Options）

🔍 中等优先级：
1. Cookie缺少'Secure'标志
2. LocalStorage包含敏感用户数据
3. 混合内容警告（HTTPS页面上的HTTP资源）

✓ 良好的安全实践：
1. 主域名启用HTTPS
2. 身份验证令牌适当过期
3. 表单上的输入验证

你想让我解释如何解决这些问题中的任何一个吗？

示例4：全栈调试（新！）

你: “我的用户在获取500错误，但我无法找出原因”

AI: 我会通过检查前后端来帮助你调试这个问题。让我先连接到你的浏览器并检查错误。

[连接到浏览器并分析网络流量]

我看到来自/api/checkout的多个500错误。现在让我检查你的后端日志以了解服务器端发生了什么。

[流式传输后端日志]

找到了问题！以下是发生的情况：

前端（浏览器）：
- POST /api/checkout 返回500错误
- 错误从15分钟前开始
- 影响23%的请求

后端（服务器日志）：
- 数据库连接池耗尽
- “错误：连接超时”出现在结账处理器中
- 错误之前内存使用量激增

根本原因：
你的结账过程没有正确关闭数据库连接，在负载下导致连接池耗尽。

快速修复：
在结账处理器中的数据库查询之后添加connection.release()。

长期修复：
实现具有自动清理和监控的连接池。

常见调试工作流程

完整调试会话

你: “我需要帮助调试我的React应用”

你的AI助手将自动：
1. 启动带有调试功能的Chrome
2. 导航到你的应用
3. 开始监控控制台和网络
4. 提供发现的问题见解

快速错误检查

你: “我的网站上有任何错误吗？”

你的AI助手将：
1. 连接到你的浏览器
2. 搜索所有错误级别的消息
3. 分析错误模式
4. 建议修复方法

API调试

你: “帮我调试为什么我的API调用失败”

你的AI助手将：
1. 监控网络流量
2. 识别失败的请求
3. 分析请求/响应详情
4. 识别失败模式

后端日志分析（新！）

你: “分析我的服务器日志中的错误”

你的AI助手将：
1. 连接到你的日志源（文件、进程或Docker）
2. 解析和结构化日志条目
3. 过滤错误和警告
4. 识别模式和异常
5. 关联前端问题

Node.js调试（新！）

你: “调试我的Node.js应用”

你的AI助手将：
1. 附加到Node.js调试器（--inspect）
2. 监控运行时错误和异常
3. 分析性能瓶颈
4. 跟踪内存使用情况
5. 提供优化建议

功能

🔌 浏览器管理

• 自动Chrome启动：您的AI助手会启动带有调试功能的Chrome——无需手动设置！
• 多浏览器支持：适用于Chrome、Chromium、Brave、Edge等
• 默认浏览器支持：可以在系统默认浏览器中打开URL
• 标签发现：查找并连接到现有浏览器标签
• 智能连接：在整个调试会话期间保持连接
• 本地调试：特别支持调试localhost应用程序

📝 控制台分析

• 错误检测：自动查找JavaScript错误
• 模式匹配：使用智能模式搜索日志
• 错误关联：链接相关错误
• 智能过滤：专注于相关消息

🌐 网络监控

• 请求分析：监控所有HTTP/HTTPS流量
• 性能指标：识别慢请求
• 错误检测：查找失败的API调用
• HAR导出：导出流量以供外部分析

🤖 AI驱动的洞察

• 自动分析：AI助手主动识别问题
• 根本原因检测：查找级联错误的来源
• 性能建议：获得优化建议
• 安全扫描：自动检测漏洞

🖥️ 后端调试（新！）

• 日志流式传输：实时从文件、进程或容器中监控日志
• Node.js调试器：使用--inspect附加到Node.js进程
• 日志解析：自动解析JSON和文本日志格式
• 模式匹配：高级过滤，支持正则表达式
• Docker支持：直接监控容器日志
• 进程监控：跟踪正在运行进程的stdout/stderr

替代安装方法

全局安装

npm install -g browser-connect-mcp

然后更新您的AI助手配置：

{
  "mcpServers": {
    "browser-connect": {
      "command": "browser-connect-mcp",
      "env": {
        "LOG_LEVEL": "info"
      }
    }
  }
}

从源码安装

git clone https://github.com/perception30/browser-connect-mcp.git
cd browser-connect-mcp
npm install
npm run build

不同工具的配置示例

Claude Desktop / Claude Code

// macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
// Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "browser-connect": {
      "command": "npx",
      "args": ["-y", "browser-connect-mcp@0.4.1"]
    }
  }
}

重要提示： 始终使用npx作为命令，并将包名作为参数。不要直接使用包名作为命令——这会导致“spawn ENOENT”错误。

Cursor IDE

查看Cursor的MCP设置面板中的偏好设置/设置面板以添加MCP服务器。

Cline/Roo-Cline

这些CLI工具通常使用配置文件如.cline/config.json。查阅它们的文档以获取MCP服务器设置。

VS Code MCP扩展

配置因扩展而异。在扩展的配置面板中查找MCP服务器设置。

故障排除

“我的AI助手无法连接到我的浏览器”

• 确保您在更新配置后已重启AI助手应用程序
• 尝试询问“启动一个新的Chrome浏览器用于调试”
• 检查系统中是否安装了Chrome/Chromium

“没有数据显示”

• 确保网页已加载并处于活动状态
• 尝试在AI助手连接后刷新页面
• 让您的AI助手“检查连接状态”

“Chrome无法启动”

• MCP服务器会尝试自动查找Chrome
• 如果失败，请确保已安装Chrome或Chromium
• 在Linux上，可能需要安装chromium-browser

“后端调试不起作用”

• 对于Node.js调试，请确保您的应用使用--inspect标志启动
• 检查日志文件是否有读权限
• 对于Docker日志，请确保Docker正在运行且您有权限
• 验证调试端口（默认9229）未被防火墙阻止

工作原理

当你要求你的AI助手调试你的应用时，这个MCP服务器：

对于前端调试：

1. 启动或连接到Chrome，带有调试协议启用
2. 使用Chrome DevTools协议建立调试会话
3. 实时监控控制台和网络事件
4. 捕获错误、性能指标和安全问题

对于后端调试：

1. 连接到日志源（文件、进程、Docker容器）
2. 当可用时附加到Node.js调试器
3. 实时流式传输和解析日志
4. 关联后端问题与前端错误

AI分析： 5. 为你的AI助手提供全面的调试数据 6. 实现跨全栈的智能分析 7. 在整个调试对话过程中保持上下文

这一切都会自动发生——你只需要描述你需要什么！

隐私与安全

• 仅限本地：所有调试都在您的本地机器上进行
• 无数据存储：信息仅在活跃会话期间保留
• 默认安全：使用Chrome DevTools协议安全
• 基于权限：AI助手在执行操作前会询问

贡献

我们欢迎贡献！请参阅我们的贡献指南以获取详细信息。

1. 分叉仓库
2. 创建你的功能分支（git checkout -b feature/amazing-feature）
3. 提交更改（git commit -m 'Add amazing feature'）
4. 推送到分支（git push origin feature/amazing-feature）
5. 打开拉取请求

文档

• 📚 完整的NPM文档 - 包含所有特性和API参考的综合指南
• 🚀 快速参考 - 常见命令和工作流程的备忘单
• 🔧 API参考 - 详细的工具规范
• 💡 示例 - 真实世界的使用示例
• 🔌 API使用示例 - 详细的API请求/响应示例
• 🐛 后端调试最佳实践 - 调试后端应用的指南

支持

• 问题：GitHub问题
• 讨论：GitHub讨论
• 文档：参见上面的链接

许可证

本项目采用MIT许可证——请参阅LICENSE文件以获取详细信息。

致谢

• 基于Anthropic的模型上下文协议
• 由[