ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Browser Tools MCP 服务说明文档

Browser Tools MCP 服务说明文档 1. 服务概述一句话简介让AI工具更智能地感知和交互浏览器的MCP服务器通过Chrome扩展捕获和分析浏览器数据支持控制台监控、截图、DOM分析和网站审计。注意此项目已不再活跃维护建议使用其他替代方案。服务名称Browser Tools MCP版本号v1.2.0开发者/提供方AgentDeskAI协议类型MCP (Model Context Protocol)编程语言JavaScript托管类型Local本地模式2. 核心功能Browser Tools MCP提供以下主要功能浏览器监控监控XHR请求/响应和控制台日志截图功能通过WebSocket捕获浏览器截图DOM分析跟踪和分析选中的DOM元素无障碍审计WCAG合规性检查包括颜色对比度、缺失alt文本、键盘导航等性能审计Lighthouse驱动的性能分析识别渲染阻塞资源、DOM大小等问题SEO审计评估页面SEO因素包括元数据、标题和链接结构最佳实践审计检查Web开发最佳实践NextJS审计针对NextJS应用的SEO和最佳实践检查调试模式按顺序运行所有调试工具审计模式按顺序运行所有审计工具3. 使用场景该服务适合以下使用场景Web开发调试实时监控浏览器控制台和网络请求无障碍合规检查确保网站符合WCAG标准性能优化识别页面加载瓶颈和性能问题SEO优化分析和改进页面的搜索引擎优化代码审计检查Web开发最佳实践AI辅助开发让AI助手能够理解和分析浏览器状态4. 接入方式4.1 服务端点Browser Tools MCP由三个核心组件组成Chrome扩展捕获截图、控制台日志、网络活动和DOM元素Node服务器作为Chrome扩展和MCP服务器之间的中间件MCP服务器提供标准化工具供AI客户端使用4.2 认证与权限安全特性本地存储所有日志存储在本地从不发送到第三方服务敏感信息过滤自动移除cookies和敏感headers智能截断截断字符串和重复对象以避免token限制4.3 数据格式服务使用JSON格式进行通信审计结果以结构化JSON格式返回包括总体评分详细问题列表可操作的改进建议4.4 服务器配置需要安装两个服务器组件MCP服务器配置在IDE中{ mcpServers: { browser-tools: { command: npx, args: [agentdeskai/browser-tools-mcplatest] } } }Node服务器在新终端窗口运行npx agentdeskai/browser-tools-serverlatest5. 接口定义Browser Tools MCP提供以下核心工具工具名称功能描述示例查询runAccessibilityAudit运行无障碍审计检查WCAG合规性检查此页面是否存在无障碍问题runPerformanceAudit运行性能审计识别性能瓶颈为什么此页面加载这么慢runSEOAudit运行SEO审计评估搜索引擎优化如何改进此页面的SEOrunBestPracticesAudit运行最佳实践审计检查此页面的最佳实践runNextJSAudit运行NextJS专项审计运行NextJS审计我使用app routerrunAuditMode按顺序运行所有审计工具进入审计模式runDebuggerMode按顺序运行所有调试工具进入调试模式6. 快速开始6.1 环境要求Chrome浏览器需要安装BrowserTools Chrome扩展Node.js用于运行本地服务器MCP客户端Cursor、Cline、Zed、Claude Desktop等6.2 安装步骤步骤1安装Chrome扩展从GitHub下载并安装v1.2.0 BrowserToolsMCP Chrome Extension步骤2在IDE中安装MCP服务器npx agentdeskai/browser-tools-mcplatest步骤3在新终端运行Node服务器npx agentdeskai/browser-tools-serverlatest步骤4打开Chrome开发者工具打开Chrome DevTools然后打开BrowserToolsMCP面板。6.3 故障排除如果遇到问题请尝试以下步骤完全关闭Chrome浏览器不仅仅是窗口重启本地Node服务器browser-tools-server确保只打开一个Chrome DevTools面板实例7. 注意事项项目状态此项目已不再活跃维护建议寻找替代方案两个服务器需要同时运行browser-tools-server和browser-tools-mcp无头浏览器审计功能使用Puppeteer自动化无头Chrome实例在最后一次审计调用后保持60秒活跃自动粘贴v1.2.0支持自动将截图粘贴到Cursor需要在DevTools面板中启用Windows兼容v1.2.0已解决Windows连接问题数据安全所有日志存储在本地不会发送到任何第三方服务
返回列表