前言
MCP 推出已有一段时间，之前我也陆续分享过一些相关内容，但大多偏基础。
《自动Bug清道夫：Gitee MCP Server初探 - 掘金》
经过一段时间的使用，打算为大家分享一些具体的 MCP 使用体验与心得，希望能为大家带来一些启发。
首先，介绍一下今天的主角：BrowserTools。
BrowserTools 简介
该工具的核心目标是通过 AI 赋能浏览器交互，提升浏览器相关工作效率，并简化调试流程。
通过 BrowserTools，我们可以让 AI 代码编辑器（比如 Cursor）和代理工具（比如 CherryStudio）操纵以下内容：
- 控制台日志和错误信息
- XMLHttpRequest（XHR）网络请求/响应
- 屏幕截图功能（支持自动粘贴到 Cursor）
- 当前选中的 DOM 元素
- 通过 Lighthouse 运行 SEO、性能及代码质量扫描
- 针对 Next.js 的专属 SEO 审计
- 进入“调试模式”（结合多种工具和提示修复 Bug）
- 进入“审计模式”（执行全面的 Web 应用审计）
这样就大大增强了我们 AI 的能力范围，覆盖从基础日志监控到复杂的性能优化，甚至可替代传统工具（如 Playwright）实现更智能的自动化操作。
BrowserTools 主要包括三个组件：
- Chrome 扩展：该扩展通过 WebSocket 通信与 Node 服务器交互，并调用 Chrome 的调试功能。
- Node Server：作为 Chrome 扩展与 MCP 服务器之间的中间层，负责协调二者的数据传输。
- MCP Server: 基于 Model Context Protocol（模型上下文协议）的服务器，为 AI 客户端提供标准化的浏览器交互工具。
BrowserTools 安装
前置要求
- 已安装 Node.js，推荐 LTS 版本 20.14.0。
- Google Chrome 或基于 Chromium 的浏览器，建议 Chrome，减少不必要的错误。
- MCP 客户端应用，本次分享使用了 Cursor。
具体安装过程就是 BrowserTools 的三个组件。
Chrome 扩展
1、点击 Chrome扩展 下载扩展，或直接公众号后台回复“20250430”下载。
2、Chrome 中地址栏输入 chrome://extensions 打开「管理扩展」页面。
3、在页面右上角开启「开发者模式」，然后点击「加载已解压的扩展程序」。
4、选择之前下载并解压的扩展文件夹，选择后即可在扩展列表中看到 BrowserToolsMCP。
记得选择 chrome-extension 文件夹，就是里面直接是html、js代码的那个。
MCP Server
1、Cursor 中打开「设置」→「功能」→「MCP 服务器」，点击「添加新 MCP 服务器」。
2、在打开的 mcp.json 中配置 MCP Server。
{
"mcpServers": {
"browser-tools": {
"command": "c:\\Windows\\System32\\cmd.exe",
"args": [
"cmd /c npx -y @agentdeskai/browser-tools-mcp@1.2.0"
],
"enabled": true
}
}
}
3、确认 browser-tools 前面的状态，显示绿色即证明成功。
Node Server
在终端任意目录运行以下命令：
npx @agentdeskai/browser-tools-server@1.2.0
注意：服务默认占用端口 3025，请确保该端口未被占用。
安装成功效果
安装成功后，可以在浏览器“开发者工具”中打开 BrowserTools，如下图。
BrowserTools 修复前端错误
给大家展示一下修复前端开发过程报错的场景。
场景说明
以下是设置的前端报错场景。
修复过程
直接在 Cursor 对话框中输入 “修复页面控制台报错”。
Cursor 会自动调用 BrowserTools 获取控制台错误，并进行修复。
整个过程不再需要我们打开 “开发者工具” - “控制台” 复制错误信息，还是比较舒服的。
唯一一点不太好的是，Claude 3.7 thinking 代码能力确实强，但是它有点啰嗦。
结语
通过本次分享，相信大家已经对 BrowserTools 有了初步的认识。
希望未来大家能将 BrowserTools 更好地应用到日常开发中，充分发挥 AI 助力开发效率的价值。
