安装BrowserTools MCP
MCP协议让AI直接读取控制台错误，自动化网页调试不用复制粘贴了，BrowserTools mcp 是一个可以读取 devtool 中日志、调试信息、截图和性能评估的服务
前提要求
在安装之前，请确保满足以下条件：
- 机器上已安装NodeJS
- 使用Google Chrome或基于Chromium的浏览器
- 安装支持MCP的客户端应用（如Cursor、Windsurf、RooCode、Cline、Continue、Zed、Claude Desktop）
- 注意：MCP协议专为Anthropic模型设计。如果使用Cursor，请确保启用Composer代理并选择Claude 3.5 Sonnet模型[7]
下载Chrome扩展
目前，官方Chrome扩展正在等待Google扩展商店的审批。在此之前，你可以手动下载扩展：
- 选项1：从GitHub获取bash复制
git clone https://github.com/AgentDeskAI/browser-tools-mcp.git - 扩展文件位于 chrome-extension 目录下[7]
安装Chrome扩展
按照以下步骤加载扩展：
- 打开”管理扩展”
- 打开Chrome的”管理扩展”页面
- 启用”开发者模式”并点击”加载未打包的扩展”
- 选择之前下载的 chrome-extension 文件夹
- 确保已解压，点击”选择”
- 完成后，你将在扩展列表中看到 BrowserToolsMCP[7]
安装MCP服务器
在终端中运行以下命令启动服务器：
npx @agentdeskai/browser-tools-mcp@1.2.0
- 注意：服务器默认使用端口3025，请确保该端口未被占用[7]
在Cursor中配置BrowserTools MCP
添加MCP服务器
在Cursor中设置BrowserTools MCP服务器：
- 打开”Cursor设置”
- 进入”功能”页面，找到”MCP服务器”，点击”添加新MCP服务器”
- 配置服务器：
- 名称：browser-tools
- 类型：command
- 命令（MacOS示例）：bash复制
npx @agentdeskai/browser-tools-mcp@1.2.0 - Windows用户可运行
which npx查找NPX路径[7]
配置文件说明
MCP配置文件使用JSON格式，以下是完整的配置示例：
json
复制
{
"mcpServers": {
"browser-tools": {
"command": "npx",
"args": ["@agentdeskai/browser-tools-mcp@1.2.0"]
}
}
}
对于Windows用户，配置可能需要使用WSL或CMD：
json
复制
{
"mcpServers": {
"browser-tools": {
"command": "wsl",
"args": ["bash", "-c", "cmd /c npx -y @agentdeskai/browser-tools-mcp@1.2.0"]
}
}
}
配置文件可以放置在以下位置：
- 项目配置：在项目目录中创建
.cursor/mcp.json文件 - 全局配置：在用户主目录中创建
~/.cursor/mcp.json文件[39]
确认连接
配置完成后，等待几秒或刷新几次，确保工具列表显示绿色圆点表示连接成功。如果失败，检查命令是否正确。
使用BrowserTools MCP
启动浏览器开发者工具
在任意网页右键点击”检查”，打开开发者工具。日志将通过MCP客户端获取。你还可以在BrowserTools面板中：
- 手动截图
- 设置截图保存路径（默认：Downloads/mcp-screenshots）
- 清除日志
- 调整日志大小限制[7]
功能使用
BrowserTools MCP提供了多种强大的功能：
- 监控XHR请求/响应和控制台日志
- 跟踪选定的DOM元素
- 捕获屏幕截图和网络流量
- 通过Lighthouse运行SEO、性能和代码质量扫描
- 执行NextJS专属SEO审计
- 进入”调试模式”，利用多种工具和提示修复bug
- 进入”审计模式”，对Web应用进行全面检查
调用示例
在Cursor的AI代理模式下，可以直接调用这些功能：
- 调用调试模式：
"这个功能坏了，快进入调试模式！" - 获取当前选中的DOM元素信息：
"获取当前选中的DOM元素信息" - 检查控制台和网络日志：
"检查控制台和网络日志，看看哪里出错了！" - 截图功能：
"界面看起来不对，帮我截个图看看？"
常见问题及解决方案
问题1：MCP服务器无法连接
检查以下步骤：
- 确认MCP服务器在Cursor中正确安装
- 在新终端中运行
npx @agentdeskai/browser-tools-server@1.2.0 - 确保已安装Chrome扩展并在目标标签页打开开发者工具
- 如果仍无法解决，运行以下命令查看Cursor MCP日志：bash复制
tail -n20-F ~/Library/Application Support/Cursor/**/*MCP.log - 截图日志、服务器日志及Chrome扩展错误（如有），联系@tedx_ai（通过X）或在GitHub提交issue[7]
问题2：路径包含空格导致问题
如果路径中包含空格，需要正确使用引号：
bash
复制
node "C:\Users\[YourUserName]\AppData\Roaming\npm\node_modules\mcp-package-version\build\index.js"
问题3：启动时弹出终端窗口
启动Cursor后会有终端弹窗运行MCP服务，这个窗口不能关闭，否则服务会断开。如果一不小心关了之后，只能通过重启Cursor，或者手动通过npx启动服务后再点刷新试试[11]。
BrowserTools MCP与Playwright的比较
BrowserTools MCP与以前介绍过的浏览器自动化MCP不同，它与配套Chrome扩展运行，直接与用户当前浏览器会话交互，无需启动新实例。相比Playwright和类似工具，它更加高效，可以直接操作当前浏览器会话，而不是启动新的实例[24]。
BrowserTools MCP的优势
BrowserTools MCP相比其他浏览器自动化工具具有以下优势：
- 直接操作当前浏览器会话：无需启动新实例
- 功能丰富：提供控制台日志监控、DOM元素选择、网络请求分析等多种功能
- 与Cursor深度集成：可以直接在代码编辑器中使用，无需离开开发环境
- AI驱动：可以与AI模型结合，提供智能的调试和开发辅助
- 高效便捷：相比Playwright等工具，操作更加简便，集成更加紧密
总结
BrowserTools MCP是一个强大的浏览器监控和交互工具，它通过MCP协议将AI驱动的应用程序与浏览器连接起来，为开发者提供高效、智能的开发支持。通过本教程，我们详细介绍了如何安装和配置BrowserTools MCP，并将其与Cursor集成，实现AI驱动的浏览器交互能力。
通过BrowserTools MCP，开发者可以：
- 监控浏览器控制台日志和网络请求
- 跟踪选定的DOM元素
- 捕获屏幕截图和网络流量
- 通过Lighthouse进行性能和SEO分析
- 在NextJS应用中进行专门的SEO审计
- 使用”调试模式”和”审计模式”解决开发问题
希望本教程能帮助开发者更好地利用BrowserTools MCP提升开发效率，实现更智能、更高效的Web开发工作流程。