浏览器连接MCP
一个模型上下文协议（MCP）服务器，使AI助手能够连接到浏览器DevTools和后端调试器，进行全面的全栈调试。适用于任何MCP兼容工具，包括Claude Desktop、Claude Code、Cursor、Cline、Roo-Cline等！
这是什么？
浏览器连接MCP使AI助手能够：
前端调试：
- 🚀 在自动启用调试的情况下启动Chrome
- 🔍 从网页中读取控制台日志和错误
- 🌐 监控网络请求和API调用
- 📊 分析性能问题
- 🔒 扫描安全漏洞
后端调试（新增！）：
- 📝 实时流式传输和分析后端日志
- 🐛 连接到Node.js调试器进行断点调试
- 🐳 监控Docker容器日志
- 📁 解析结构化和非结构化日志文件
- 🔍 使用模式匹配搜索和过滤日志
AI驱动分析：
- 🤖 前端和后端之间的智能错误关联
- 💡 全栈根本原因分析
- 🎯 性能瓶颈检测
- 🛡️ 安全漏洞扫描
通过自然对话，无需编码！
快速开始
1.通过npx安装（推荐-无需安装！）
添加到AI助手的MCP配置中。以下是一些常用工具的示例：
重要： 由于MCP客户端处理生成命令的方式，您必须使用以下配置格式 npx 作为命令，包名作为参数：
克劳德桌面 （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将自动使用最新版本。
光标/鼠标/其他MCP工具：检查您的工具文档，了解MCP服务器配置位置。
2.重新启动您的AI助手
保存配置后，重新启动AI助手应用程序以加载浏览器调试功能。
3.开始调试！
自然地与你的AI助手交谈：
You: "Help me debug my website at localhost:3000"
AI: I'll help you debug your website. Let me launch Chrome with debugging enabled
and connect to it.
[AI launches Chrome and connects automatically]
Now I'm connected to your browser. I can see the console messages and network traffic.
What specific issues are you experiencing?
You: "The page is loading slowly"
AI: Let me analyze the performance of your page...
[AI automatically runs performance analysis]
I found several performance issues:
1. Large uncompressed images (3.2MB total)
2. Render-blocking JavaScript in the header
3. Multiple API calls that could be batched
Would you like me to investigate any of these issues in detail?兼容的AI助手
此MCP服务器可与支持模型上下文协议的任何工具配合使用：
- 克劳德桌面 -Anthropic的官方桌面应用程序
- 克劳德代码 -Anthropic面向开发人员的CLI
- 光标 -AI驱动的代码编辑器
- 克莱恩 -命令行AI助手
- 鲁·克莱恩 -Cline的增强版
- 任何兼容MCP的IDE或平台
你能问你的AI助手什么？
调试请求
- “启动Chrome并帮助我调试我的网站”
- “调试在localhost:3000上运行的应用程序” -自动启动并连接
- “在默认浏览器中打开localhost:8080” -在首选浏览器中打开
- “连接到我现有的Chrome浏览器”
- “显示任何JavaScript错误”
- “是否有任何失败的API调用？”
- “为什么我的页面加载缓慢？”
- “检查安全漏洞”
- “查找内存泄漏”
- “调试CORS问题”
- “导出网络流量以供分析”
性能分析
- “分析此页面的性能”
- “哪些请求耗时最长？”
- “查找性能瓶颈”
- “显示最慢的API终结点”
错误调查
- “发生了什么错误？”
- “在控制台中查找所有TypeErrors”
- “显示与身份验证相关的错误”
- “这些错误是相互关联的吗？”
安全检查
- “运行安全扫描”
- “检查是否有任何敏感数据被泄露”
- “查找安全漏洞”
- “是否有任何不安全的请求？”
后端调试
- “从我的Node.js服务器流式传输日志”
- “显示server.log中的后端错误”
- “将调试器附加到端口9229上的Node.js进程”
- “监控我的Docker容器日志”
- “在后端日志中查找所有数据库错误”
- “将前端错误与后端日志相关联”
- “显示后端日志中速度较慢的API终结点”
真实世界的例子
示例1：调试API错误
You: "My app isn't working, can you help debug it?"
AI: I'll help you debug your app. Let me connect to your browser and see what's happening.
[Automatically launches/connects to Chrome]
I can see your application. Let me check for any errors...
I found several issues:
1. API calls to /api/user are returning 401 Unauthorized errors
2. There are CORS errors when trying to access the payment service
3. Several "undefined is not a function" errors in your React components
The 401 errors suggest an authentication issue. Would you like me to:
- Look at the request headers to check authentication tokens?
- Find when the authentication errors started?
- Check if there are any related console errors?示例2：性能优化
You: "Users are complaining the checkout page is slow"
AI: I'll analyze the checkout page performance. Let me connect to your browser and load the checkout page.
[Connects and monitors the page load]
Here's what I found analyzing your checkout page:
Performance Issues:
1. Initial page load: 4.3 seconds (should be under 3s)
2. Largest Contentful Paint: 3.8 seconds
3. Time to Interactive: 5.2 seconds
Main bottlenecks:
- Product images are not optimized (2.1MB total)
- Stripe SDK loads synchronously, blocking render
- 3 sequential API calls that could run in parallel
Recommendations:
1. Compress and lazy-load product images
2. Load Stripe SDK asynchronously
3. Parallelize the API calls
Would you like me to show you the specific network requests causing delays?示例3：安全审计
You: "Can you check my app for security issues?"
AI: I'll run a comprehensive security scan on your application.
[Automatically scans console logs and network traffic]
Security Scan Results:
⚠️ High Priority Issues:
1. API keys exposed in console logs (GitHub API key found)
2. User passwords visible in network requests (should use HTTPS)
3. Missing security headers (CSP, X-Frame-Options)
🔍 Medium Priority:
1. Cookies without 'Secure' flag
2. LocalStorage containing sensitive user data
3. Mixed content warnings (HTTP resources on HTTPS page)
✓ Good Security Practices Found:
1. HTTPS enabled on main domain
2. Authentication tokens expire appropriately
3. Input validation on forms
Would you like me to explain how to fix any of these issues?示例4：全栈调试（新增！）
You: "My users are getting 500 errors but I can't figure out why"
AI: I'll help you debug this issue by examining both frontend and backend. Let me start by connecting to your browser and checking for errors.
[Connects to browser and analyzes network traffic]
I see multiple 500 errors from /api/checkout. Now let me check your backend logs to understand what's happening server-side.
[Streams backend logs]
Found the issue! Here's what's happening:
Frontend (Browser):
- POST /api/checkout returning 500 errors
- Errors started 15 minutes ago
- Affecting 23% of requests
Backend (Server Logs):
- Database connection pool exhausted
- "Error: Connection timeout" in checkout handler
- Memory usage spiking before errors
Root Cause:
Your checkout process isn't closing database connections properly, leading to connection pool exhaustion under load.
Quick Fix:
Add connection.release() after your database queries in the checkout handler.
Long-term Fix:
Implement connection pooling with automatic cleanup and monitoring.常见调试工作流
完成调试会话
You: "I need help debugging my React app"
Your AI assistant will automatically:
1. Launch Chrome with debugging enabled
2. Navigate to your app
3. Start monitoring console and network
4. Provide insights on any issues found快速错误检查
You: "Are there any errors on my website?"
Your AI assistant will:
1. Connect to your browser
2. Search for all error-level messages
3. Analyze error patterns
4. Suggest fixesAPI调试
You: "Help me debug why my API calls are failing"
Your AI assistant will:
1. Monitor network traffic
2. Identify failed requests
3. Analyze request/response details
4. Identify patterns in failures后端日志分析（新增！）
You: "Analyze my server logs for errors"
Your AI assistant will:
1. Connect to your log source (file, process, or Docker)
2. Parse and structure log entries
3. Filter for errors and warnings
4. Identify patterns and anomalies
5. Correlate with frontend issuesNode.js调试（新增！）
You: "Debug my Node.js application"
Your AI assistant will:
1. Attach to Node.js debugger (--inspect)
2. Monitor runtime errors and exceptions
3. Analyze performance bottlenecks
4. Track memory usage
5. Provide optimization suggestions特性
🔌 浏览器管理
- Chrome自动启动：您的AI助手在启用调试的情况下启动Chrome，无需手动设置！
- 多浏览器支持：适用于Chrome、Chromium、Brave、Edge等
- 默认浏览器支持：可以在系统的默认浏览器中打开URL
- 选项卡发现：查找并连接到现有浏览器选项卡
- 智能连接：在整个调试会话期间保持连接
- 本地主机调试：对调试localhost应用程序的特殊支持
📝 控制台分析
- 错误检测：自动查找JavaScript错误
- 模式匹配：使用智能模式搜索日志
- 误差相关：将相关错误链接在一起
- 智能过滤：关注相关信息
🌐 网络监控
- 请求分析：监视所有HTTP/HTTPS流量
- 性能指标：识别缓慢的请求
- 错误检测：查找失败的API调用
- HAR出口：用于外部分析的出口流量
🤖 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不同工具的配置示例
克劳德桌面/克劳德代码
// 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”错误。
光标IDE
在首选项/设置面板中检查Cursor的MCP设置，以添加MCP服务器。
克莱恩/鲁克莱恩
这些CLI工具通常使用配置文件，如 .cline/config.json。有关MCP服务器设置，请参阅他们的文档。
VS代码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服务器：
对于前端调试：
- 启动或连接到Chrome 启用调试协议
- 建立调试会话 使用Chrome DevTools协议
- 监控控制台和网络事件 实时的
- 捕获错误、性能指标和安全问题
对于后端调试：
- 连接到日志源 （文件、进程、Docker容器）
- 附加到Node.js调试器 如果可用
- 流式传输和解析日志 实时的
- 将后端问题与前端错误相关联
人工智能分析： 5\. 为您的AI助手提供全面的调试数据 6\. 实现跨整个堆栈的智能分析 7\. 维护上下文 在整个调试对话中
所有这一切都是自动发生的——你只需描述你需要什么！
隐私和安全
- 仅限本地：所有调试都在本地计算机上进行
- 无数据存储：信息仅在活动会话期间保留
- 缺省巩固安全：安全地使用Chrome DevTools协议
- 基于权限的：AI助手在执行操作之前会询问
贡献
我们欢迎捐款！请查看我们的 贡献指南 了解详情。
- 分叉存储库
- 创建功能分支(
git checkout -b feature/amazing-feature) - 提交您的更改(
git commit -m 'Add amazing feature') - 推到分支(
git push origin feature/amazing-feature) - 打开拉取请求
文档
- 📚 **** -全面的指南，包括所有功能和API参考资料
- 🚀 快速参考 -常见命令和工作流的备忘单
- 🔧 api参考 -详细的工具规格
- 💡 例子 -实际使用示例
- 🔌 API使用示例 -详细的API请求/响应示例
- 🐛 后端调试最佳实践 -后端应用程序调试指南
支持
- 问题:
- 讨论:
- 文档：请参阅上面的链接
许可证
此项目根据MIT许可证获得许可-请参阅 许可证 文件以获取详细信息。
致谢
- 建立在 模型上下文协议 通过Anthropic
- 由...驱动 Chrome DevTools协议
- 受到需要更好调试工具的开发人员的启发
______________________________________________________________________
由以下材料制成❤️ 适用于希望在AI协助下进行调试的开发人员
MCP兼容性
此服务器实现了模型上下文协议（MCP）标准，使其与以下内容兼容：
- 克劳德桌面和克劳德代码（拟人）
- 光标IDE
- Cline和Roo Cline命令行界面工具
- 支持MCP的VS代码扩展
- 任何未来实施MCP标准的工具