# why
# what
- 通过 Chrome 扩展和本地 Node 服务器，捕获和分析浏览器数据（日志、网络请求、截图等），然后喂给LLM，帮助开发者调试代码或与网页交互。它就像一个“刘览器侦探”，把前端运行时的细节交给 AI处理，提升开发效率。
| 组件 | 作用（为什么要有它） | 典型安装/启动位置 | 常用启动命令 |
| ----------------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------- |
| **Chrome 扩展：BrowserToolsMCP** | 在浏览器 DevTools 里采集页面 DOM、控制台日志、屏幕截图等原始数据，并把数据发到本地 server | Chrome → `chrome://extensions` → “开发者模式” → “加载已解压的扩展”（从 GitHub release 下载 zip 解压即可） | —— |
| **browser-tools-server** | 本地 Node.js 中间件：收集扩展发送的数据，统一输出 JSON / 文件；默认监听 **3025** 端口 | 任何终端窗口 | `npx -y @agentdeskai/browser-tools-server@latest` |
| **browser-tools-mcp** | MCP 网关：你的 IDE / ChatGPT 在调用 **browser-tools** 工具时，MCP 将请求转发给上面的 server，并把返回值塞回 IDE / ChatGPT | IDE 内置 MCP 插件的“自定义工具”位置；或者直接在独立终端里跑 | `npx -y @agentdeskai/browser-tools-mcp@latest` |
- **为什么需要两层 server？**
- **browser-tools-server** 做数据收集 & 存储，和 Chrome 扩展是 WebSocket 直连。
- **browser-tools-mcp** 负责把 [[IDE]] / ChatGPT 的“工具调用”协议转换成对 server 的 HTTP/WebSocket 调用，再把 JSON 结果回传给 IDE。
# how
## 具体安装与启动顺序
- **前置条件**：已安装 Node.js ≥ 16，Chrome ≥ 114。
1. **安装并启用扩展**
1. 1.1 访问 GitHub release，下载 `BrowserToolsMCP-v1.2.0.zip`。
2. 1.2 解压后：
- Chrome 地址栏输入 `chrome://extensions`
- 打开“开发者模式”
- 点击“加载已解压的扩展”，选择刚解压的文件夹
- 1.3 成功后，扩展图标会出现在浏览器工具栏（通常是淡蓝色小机器人）。
2. **终端 A：启动 browser-tools-server**
```bash
npx -y @agentdeskai/browser-tools-server@latest
# 首次执行会临时下载依赖，成功后显示：
# Listening on http://127.0.0.1:3025
#如果 3025 被占用，可以换端口：
npx -y @agentdeskai/browser-tools-server@latest --port 4000
```
1. **终端 B（或 IDE 的 MCP 配置页）：启动 browser-tools-mcp**
```bash
# 若 server 用默认 3025 端口，可直接：
npx -y @agentdeskai/browser-tools-mcp@latest
# 如果 server 改了端口，需要告诉 mcp
npx -y @agentdeskai/browser-tools-mcp@latest --port 4000
```
2. **验证连通**
- 打开任意网页 → `F12` 调出 DevTools → 右侧出现 “BrowserToolsMCP” 面板。
- 面板左上角显示 “Connected ✓” 即代表扩展 ↔ server ↔ mcp 三方链路打通。
- IDE / ChatGPT 里再次调用 `getConsoleErrors`、`runPerformanceAudit` 之类工具，不再报 “fetch failed”。
## 配置[[cursor]]
- setting - MCP tools - 键入 json 代码
```
{
"mcpServers": {
"browser-tools": {
"command": "npx",
"args": ["-y", "@agentdeskai/browser-tools-mcp@latest"],
"enabled": true
}
}
}
```
- 配置好后保存 - 重启 - 显示绿色表示配置撑过
## 在 cursor 中使用
- 必须在终端启动browser-tools-server和browser-tools-mcp服务器，cursor 才能正常使用
- MCP的工作原理是：
1. 自动启动：当您启动Cursor时，它会自动读取 mcp.json 配置文件
2. 后台管理：Cursor会根据配置自动启动和管理 browser-tools-mcp 服务器
3. 无需干预：整个过程完全自动化，您无需任何手动操作
- 您只需要：
- ✅ 确保 mcp.json 配置正确（已完成）
- ✅ 重启Cursor让配置生效
- ✅ 直接在对话中使用浏览器工具功能
如何验证是否工作：
重启Cursor后，您可以直接请我帮您截屏或访问网页，如果MCP配置正确，这些功能就会自动可用。
这就是MCP的便利之处 - 一次配置，自动管理！
# how good
## 常用使用场景和命令：
- 🖼️ 截图和视觉检查：
- "帮我截个屏"
- "看看当前页面的样子"
- 🔍 网站分析：
- "分析这个网站的SEO表现"
- 本地的和互联网上的都能分析，只要页面打开了「检查」，并确保 browserTool MCP 是连接状态
- 
- 然后在 cursor 中向 LLM 提问
- #### SEO Audit (`runSEOAudit`)
- Evaluates how well the page is optimized for search engines.
- **Example Queries:**
- "How can I improve SEO for this page?"
- "Run an SEO audit."
- "Check SEO on this page."
- getMetaTags
- getHeadingStructure
- "检查网站的性能问题"
- "做个无障碍性审计"
- 🐛 调试功能：
- "查看控制台错误"
- "检查网络请求日志"
- "启动调试模式"
- 📊 审计报告：
- "生成完整的网站审计报告"
- "检查最佳实践"
- 使用方法：
1. 在浏览器中打开您想分析的网页（本地或者远程的，并且打开检查）
2. 回到Cursor，直接告诉我您想做什么
3. 我会自动使用相应的浏览器工具来完成任务
4.
现在就可以试试！比如您可以说："帮我分析一下当前网页的性能"
# Ref.
- [github库](https://github.com/AgentDeskAI/browser-tools-mcp)
- [GPT](https://chatgpt.com/g/g-p-6842dbd542ec8191b344275ce1439a9e-cursor/c/684c1c36-97d8-8002-91e9-f2c14c0ad3ee)
- [配置教程](https://www.cloudesx.com/article/mcp-server-BrowserTools-mcp)