/ 目录 / 演练场 / Browser Tools
● 社区 AgentDeskAI ⚡ 即开即用

Browser Tools

作者 AgentDeskAI · AgentDeskAI/browser-tools-mcp

读取你的 Chrome 里的实时控制台日志、网络错误、DOM 和截图——调试信息直接进入你的 agent。

AgentDeskAI 的 browser-tools MCP 包含 Chrome 扩展 + 本地网桥 + MCP server。你的 agent 看到你看到的东西——已登录会话、扩展、真实的 DOM 和控制台。最适合那些在干净浏览器中无法重现的调试场景。

为什么要用

核心特性

实时演示

实际使用效果

browser-tools.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "browser-tools",
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "browser-tools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@agentdeskai/browser-tools-mcp@latest"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add browser-tools -- npx -y @agentdeskai/browser-tools-mcp@latest

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: Browser Tools

使用真实控制台和网络信息调试线上前端 bug

👤 前端工程师 ⏱ ~15 min intermediate

何时使用: bug 只在你的实际会话中重现(已登录,特定数据)。你希望 agent 读取控制台和网络标签页。

前置条件
  • 已安装 Chrome 扩展 + 网桥服务运行 — 从发布页面安装扩展,然后在终端运行 npx @agentdeskai/browser-tools-server@latest
  • MCP server 连接到你的客户端npx -y @agentdeskai/browser-tools-mcp@latest
步骤
  1. 在 DevTools 打开的情况下重现 bug
    在启用扩展的 Chrome 中打开受影响的页面。触发 bug。不要关闭标签页。✓ 已复制
    → Bug 可见,扩展图标显示它正在捕获
  2. 把上下文拉进 agent
    获取最后 50 条控制台消息和任何失败的网络请求。总结页面在报错什么。✓ 已复制
    → 显示具体错误和堆栈跟踪
  3. 诊断并提出修复方案
    根据错误指出可能的文件/行。如果是 404,识别错误的 URL;如果是 JS 错误,找出根本原因。✓ 已复制
    → 有证据支持的具体假设

结果: 一个调试循环,agent 拥有和你打开 DevTools 时一样的信息——比读截图描述快得多。

注意事项
  • 网桥服务没有运行,MCP 默默返回空数据 — 总是先检查 curl localhost:3025/identity 是否响应;MCP 调用前网桥必须运行
  • 从错误的标签页捕获 — 扩展捕获活动标签页。在问 agent 前点击正确的标签页
搭配使用: sentry

对你正在查看的页面运行 Lighthouse 风格的审计

👤 前端 / SEO / 无障碍工程师 ⏱ ~10 min beginner

何时使用: 你想审计页面在你会话中的实际渲染样子(不是干净爬虫)。

步骤
  1. 打开目标页面
    在启用扩展的 Chrome 中导航到 <URL>。✓ 已复制
    → 页面已加载
  2. 运行审计模式
    运行审计工具——性能、无障碍、SEO、最佳实践。总结前 5 个问题及修复建议。✓ 已复制
    → 按优先级排序的问题列表
  3. 深入
    对于无障碍失败,列出确切的选择器和违反的 WCAG 规则。✓ 已复制
    → 可操作的补救步骤

结果: 无需离开浏览器的完整审计,范围限于真实用户状态。

注意事项
  • 需要身份验证的页面审计失败,因为工具重新导航 — 在已加载的页面上使用调试器模式的元素/控制台工具,而不是完整审计

检查并解释特定元素

👤 前端开发者、设计师 ⏱ ~5 min beginner

何时使用: 某个组件看起来不对。你想快速了解'应用了什么 CSS 以及为什么',无需深入挖掘。

步骤
  1. 在 DevTools 中选择元素
    打开 DevTools,点击元素检查器,选择问题元素。✓ 已复制
    → 元素在 Elements 面板中高亮显示
  2. 要求 agent 检查
    获取选定元素的计算样式、继承规则和边界框。解释它为什么这样渲染。✓ 已复制
    → 基于实际 CSS 层叠的解释
  3. 提出修复方案
    建议最小的 CSS 改动来达到 [期望视觉效果]。展示修改前后的规则。✓ 已复制
    → 最小差异建议

结果: 以对话速度调试 CSS。

注意事项
  • 元素选择不持久——agent 看到不同的元素 — 在提问前重新选择元素;不要让 DevTools 面板在消息间改变焦点

组合

与其他 MCP 搭配,撬动十倍杠杆

browser-tools + sentry

在你的浏览器中重现 Sentry 错误并拉取实时控制台信息

Sentry 问题 WEB-3a91 说向 /api/checkout 的 XHR 返回 500。在我的 Chrome 中导航到页面,重现,并捕获控制台 + 网络。✓ 已复制
browser-tools + playwright

browser-tools 用于实时调试,Playwright 用于后续可重复的重现

我通过 browser-tools 在我的实时 Chrome 中找到了 bug。现在写一个 Playwright 测试来重现确切的点击序列。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
takeScreenshot 当前状态的视觉捕获 free
getConsoleLogs / getConsoleErrors 调试任何 JS 错误 free
getNetworkLogs / getNetworkErrors 诊断失败的 API 调用 free
getSelectedElement 用户在 DevTools 中选择了元素 free
runAccessibilityAudit 当前页面的无障碍审查 free
runPerformanceAudit 当前页面的性能审计 free
runSEOAudit SEO 审查 free
runBestPracticesAudit 通用代码质量审查 free
runNextJSAudit 你在 Next.js 上 free
wipeLogs 在调查会话间清除 free

成本与限制

运行它的成本

API 配额
无——全部本地
每次调用 Token 数
日志转储可能很大(5k+ tokens)。在会话间使用 wipeLogs
费用
免费,开源
提示
在每次调查前清除日志——避免拉入无关噪声

安全

权限、密钥、影响范围

凭据存储: 无——针对你的现有 Chrome 会话运行
数据出站: 仅到 localhost:3025(网桥)。除了 agent/MCP 客户端做的事,什么都不离开你的机器。

故障排查

常见错误与修复

所有工具返回空 / '未连接'

网桥服务没有运行。启动它:在专用终端运行 npx @agentdeskai/browser-tools-server@latest

验证: curl http://localhost:3025/identity
扩展图标灰色 / 不活跃

点击扩展图标,确认它显示 'Connected'。如果没有,重新加载标签页。

审计超时失败

某些审计在重页面上需要更长时间。关闭其他标签页以释放 CPU;重新运行。

捕获了错误的标签页

扩展捕获最后激活的标签页。在调用工具前立即点击正确的标签页。

替代方案

Browser Tools 对比其他方案

替代方案何时用它替代权衡
chrome-devtools MCP你想要直接的 CDP 访问,无需浏览器扩展无需扩展,但你失去了真实用户会话信息
Playwright MCP你需要可重复的自动化,而不是实时调试干净的浏览器——看不到你的登录会话

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills