Browser Tools MCP

BrowserTools MCP 是一个基于 Anthropic 的 Model Context Protocol (MCP) 的浏览器交互工具，通过 Chrome 扩展实现浏览器数据的捕获和分析，使 AI 工具能够更智能地与浏览器交互。该工具由 Chrome 扩展、MCP 服务器和本地 Node 服务器三部分组成，支持在兼容的 MCP 客户端（如 Cursor IDE）中使用，适用于网页开发调试、SEO 优化、性能分析、无障碍检测等场景。

核心功能

BrowserTools MCP 提供了多种浏览器监控与分析功能，包括：

• 浏览器监控：实时监控浏览器控制台输出、网络活动和 DOM 元素。
• 自动化审计：提供可访问性、性能、SEO 和最佳实践的自动化审计。
• 截图功能：支持自动截图并粘贴到客户端。
• NextJS 专项审计：针对 NextJS 框架的专项 SEO 和最佳实践检查。

此外，工具还支持单张和全页截图、页面缩放和平移、多截图管理等功能，方便用户进行网页内容的查看与分析。

安装方法

安装 BrowserTools MCP 需要三个组件：Chrome 扩展、MCP 服务器和本地 Node 服务器。具体步骤如下：

1. 安装 Chrome 扩展：从 GitHub 下载并安装 v1.2.0 版本的 Chrome 扩展。
2. 安装 MCP 服务器：在 IDE 中运行以下命令安装 MCP 服务器：

npx @agentdeskai/browser-tools-mcp@latest

1. 运行本地 Node 服务器：在新终端窗口中运行以下命令启动本地服务器：

npx @agentdeskai/browser-tools-server@latest

1. 打开 Chrome 开发者工具：在浏览器中打开开发者工具并选择 BrowserToolsMCP 面板。

使用方法

安装完成后，用户可以通过以下方式使用 BrowserTools MCP：

• 在兼容的 MCP 客户端中（如 Cursor IDE）输入命令，例如：

runAccessibilityAudit

runPerformanceAudit

runSEOAudit

这些命令分别用于运行可访问性审计、性能审计和 SEO 审计。

此外，用户还可以通过浏览器插件进行截图操作，包括：

• 单张截图：点击“快照”按钮，捕获当前视口的屏幕截图。
• 全页截图：使用快捷键 Ctrl + Shift + I（Windows）或 Cmd + Shift + I（Mac），捕获整网页的长截图。

使用场景

BrowserTools MCP 适用于多种浏览器交互和数据分析场景，包括：

• 网页开发调试：通过实时监控浏览器控制台输出、网络活动和 DOM 元素，帮助开发者快速定位问题。
• SEO 优化：运行 SEO 审计，识别页面中的 SEO 问题并提供改进建议。
• 性能分析：运行性能审计，识别页面加载瓶颈并提供优化建议。
• 无障碍检测：运行可访问性审计，确保网页符合 WCAG 无障碍标准。
• NextJS 项目优化：针对 NextJS 框架进行专项 SEO 和最佳实践检查。

注意事项

在使用 BrowserTools MCP 时，需要注意以下几点：

• 所有数据本地运行，不会发送到第三方。
• 部分功能依赖 Chrome 浏览器。
• 初次配置可能需要调试。
• 如果安装后无法连接，可以尝试完全关闭 Chrome 浏览器，重启本地 Node 服务器，并确保只打开一个开发者工具面板。

使用示例

以下是几个典型使用示例：

• 检查页面可访问性：在 MCP 客户端中输入 runAccessibilityAudit，确保网页符合 WCAG 无障碍标准。
• 优化页面加载速度：输入 runPerformanceAudit，识别并解决页面性能瓶颈。
• NextJS SEO 优化：输入 runSEOAudit，运行 NextJS 专项 SEO 审计。

此外，用户还可以通过浏览器插件进行截图操作，例如：

Ctrl + Shift + I

捕获整页截图。

BrowserTools MCP 提供了丰富的功能和灵活的使用方式，帮助开发者和测试人员更高效地进行浏览器交互和数据分析。