BrowserTools MCP

这个 Agent 能做什么，适合哪些场景？

BrowserTools MCP 由两部分组成：一个通过 npx 启动的 MCP 服务器（@agentdeskai/browser-tools-mcp），以及一个需要手动加载到 Chrome 的扩展。它不启动新的自动化浏览器，而是通过 DevTools 扩展附着在你已登录的真实 Chrome 会话上，采集控制台日志、XHR/fetch 网络请求、元素选择、页面信息、截图和本地存储，并以 16 个工具、3 个内置提示和若干 MCP resource 的形式暴露给 Cursor、Claude Code、Windsurf、Cline、Zed、Gemini CLI 等客户端。2.0 版本把原来的三个进程合并为一个，只绑定 127.0.0.1，要求每次运行生成的 token 鉴权，并在数据离开浏览器前清洗 Authorization、Cookie、JWT 和云厂商密钥等凭据。它另外提供 Lighthouse 可访问性、性能、SEO 和最佳实践审计，审计由独立浏览器进程执行且默认不触达内网与云元数据地址。运行时要求 Node.js 22.19 或更高版本，项目以 MIT 协议开源。

扩展在你打开 DevTools 的标签页上开始采集，并把遥测数据发给本地连接器；MCP 服务器随后向客户端暴露工具：getConsoleLogs、getConsoleErrors、getNetworkLogs、getNetworkErrors、getSelectedElement、getPageInfo、getConnectionStatus、listBrowserTabs、takeScreenshot、refreshBrowser、getBrowserStorage、wipeLogs，以及 runAccessibilityAudit、runPerformanceAudit、runSEOAudit、runBestPracticesAudit。每个有 DevTools 的标签页独立计数和保留数据，工具默认作用于最近打开 DevTools 的“当前标签页”，也可传 tabId 或 allTabs 指定范围，每个结果都会附上 tabId、url 和 otherTabs。整段历史数据通过 browser-tools://console/{tabId|all}、browser-tools://network/{tabId|all}、browser-tools://har/{tabId|all}、browser-tools://screenshot/{name}、browser-tools://audit/{reportId} 等 MCP resource 提供，工具用 resource_link 引用，避免撑爆上下文。读日志的工具支持 limit、offset 和关键词过滤，结果按最新优先返回并同时给出 total 与 returned。审计会启动一个独立 Chromium 浏览器，把完整的 Lighthouse 报告保存到截图目录下的 audits/ 中（保留最近 20 份）。

1. 前端开发者复现登录态下的线上问题时，让 Cursor 里的 AI 直接读取当前页面的控制台报错，而不必复制粘贴日志。
2. 调试需要鉴权或 Cookie 的后台页面时，使用已登录的 Chrome 会话而非新建 Playwright/Chrome DevTools MCP 的干净配置。
3. 排查接口 4xx/5xx 和慢请求时，用 getNetworkLogs 或 getNetworkErrors 按 URL、请求体和状态过滤，必要时拉取 HAR 资源做完整分析。
4. 在提交前跑一轮 runAccessibilityAudit 或 runPerformanceAudit，拿到 Core Web Vitals 与无障碍问题清单。
5. Next.js 项目做 SEO 检查时，调用内置的 nextjsSeoAudit 提示配合 runSEOAudit 走系统化流程。
6. 多个标签页同时开着时，用 listBrowserTabs 定位并指定 tabId，避免截图或日志取错页面。

如何安装或部署这个 Agent？

需要 Node.js 22.19 或更高版本，先确认版本：

node --version

在你的 MCP 客户端配置里加入服务器（以通用 mcpServers 格式为例）：

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

Windows 上若客户端找不到 npx，改成：

{
  "mcpServers": {
    "browser-tools": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@agentdeskai/browser-tools-mcp@latest"]
    }
  }
}

然后克隆仓库，在 chrome://extensions 打开开发者模式，选择“加载已解压的扩展程序”，指向仓库中的 chrome-extension 目录。不需要再启动第二个服务器。安装后可用 doctor 自检：

npx @agentdeskai/browser-tools-mcp --doctor

如何使用这个 Agent？

在要检查的页面上按 F12 打开 Chrome DevTools，采集随即开始（BrowserTools 面板只用于设置和状态查看），然后让 AI 客户端调用工具，例如“检查控制台错误”或“对这个页面跑一次无障碍审计”。需要观察采集是否真的发生时，用 verbose 启动连接器：

npx @agentdeskai/browser-tools-server --verbose

常用参数包括端口、截图目录、工具白名单与审计来源放行：

npx @agentdeskai/browser-tools-mcp --port 3025 --screenshot-dir ./shots --only getConsoleErrors,getNetworkLogs --audit-allow-origin http://localhost:3000

多个客户端要共享同一浏览器会话时，先单独启动连接器，其他客户端会自动附着：

npx @agentdeskai/browser-tools-server

开发本项目时：

npm install
npm run build
npm test
npx playwright install chromium
npm run test:e2e

这个 Agent 有哪些优点和局限？

这个 Agent 与同类方案有什么区别？

与相关度最高的同类 agent 并排比较关键指标。

FollowAgents 如何评估这个 Agent？

常见问题