BrowserTools MCP

基本能力

产品定位

BrowserTools MCP 是一个浏览器监控和交互工具，旨在通过 AI 增强浏览器操作的自动化能力，提供丰富的审计和调试功能。

核心功能

1. 浏览器监控：捕获屏幕截图、控制台日志、网络活动和 DOM 元素。
2. 审计工具：支持多种审计类型，包括可访问性、性能、SEO、最佳实践和 NextJS 特定审计。
3. 调试工具：提供调试模式，按特定顺序执行所有调试工具。
4. 自动化交互：通过 Puppeteer 实现无头浏览器自动化，支持 SPA 和动态内容加载。
5. 本地数据处理：所有日志和数据处理均在本地完成，不发送到第三方服务。

适用场景

1. 开发调试：帮助开发者快速识别和解决页面问题。
2. SEO 优化：分析页面 SEO 问题并提供改进建议。
3. 性能优化：检测性能瓶颈并优化页面加载速度。
4. 可访问性检查：确保页面符合 WCAG 标准。
5. NextJS 应用优化：针对 NextJS 应用进行特定优化。

工具列表

1. Accessibility Audit：检查页面是否符合可访问性标准。
2. Performance Audit：分析页面性能问题。
3. SEO Audit：评估页面 SEO 优化情况。
4. Best Practices Audit：检查页面是否符合最佳实践。
5. NextJS Audit：针对 NextJS 应用的特定审计。
6. Audit Mode：按顺序执行所有审计工具。
7. Debugger Mode：按顺序执行所有调试工具。

常见问题解答

1. 如何更新工具版本？
2. 使用命令 npx @agentdeskai/[email protected] 更新 MCP 客户端。
3. 下载最新版本的 Chrome 扩展。
4. 如何启动本地服务器？
5. 使用命令 npx @agentdeskai/[email protected] 启动本地 Node 服务器。
6. 如何解决连接问题？
7. 确保 Chrome 扩展已启用，并检查网络配置。

使用教程

使用依赖

1. 确保已安装 Node.js 和 npm。
2. 安装 Chrome 浏览器。

安装教程

1. 安装 MCP 客户端： bash npx @agentdeskai/[email protected]
2. 下载并安装 Chrome 扩展：
3. 下载地址：v1.2.0 BrowserToolsMCP Chrome Extension
4. 启动本地服务器： bash npx @agentdeskai/[email protected]

调试方式

1. 打开 Chrome 开发者工具。
2. 确保日志已发送到服务器。
3. 使用以下命令触发审计工具：
4. 可访问性审计：runAccessibilityAudit
5. 性能审计：runPerformanceAudit
6. SEO 审计：runSEOAudit
7. 最佳实践审计：runBestPracticesAudit
8. 审计模式：runAuditMode
9. 调试模式：runDebuggerMode

许可证

该项目遵循 MIT 开源许可条款，请参阅 MIT 了解完整条款。