最好用的浏览器 MCP:BrowserTools

能做性能分析,能解基础 bug,能调好样式,我愿称之为当下 T0 Browser MCP。

BrowserTools 是一个用于实现 AI 应用与浏览器自动化交互的 MCP。它允许 AI 通过标准化协议控制用户现有的浏览器,支持网页导航、表单填写、数据提取等任务。相比 Playwright 等其他浏览器 MCP,BrowserTools 能够复用用户已登录的浏览器环境——这意味着 AI 可以在真实的用户环境中执行各类操作。

🖼️ 配图待补:KV4Ib8DdloiTUExIQijcr85jnig

市面上有非常多 Browser 相关的 MCP,目前试用下来 BrowserTools 比较靠谱,整体稳定性较高,能正确获取到浏览器信息,并且能在用户浏览器上直接执行,实用性较高。先看个 demo——解决 AntD 过期属性报错:

🎬 演示视频(原文档内):Built-in Retina Display.mp4

这个过程中,Cursor 调用 BrowserTools 获取 Console 中的错误信息,分析错误所在,之后修复问题,整个过程非常丝滑。同类方法能够用于解决诸多基础问题,实用性很高。

1. 使用方法

BrowserTools 的启动流程有点复杂,建议跟随如下步骤操作:

1. 安装浏览器插件,这一步有点啰嗦:

   1. 下载浏览器插件

   2. 解压后,在浏览器中加载该插件:

      🖼️ 配图待补:NVARbRnSooGHTNx7Lx8cAcXBndh

2. 启动 Server:

   npx -y @agentdeskai/browser-tools-server@latest

3. 添加 MCP 配置:

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

4. 在需要测试的浏览器 Tab 开启 DevTools:

   🖼️ 配图待补:WAM6bH2R7ojRHCxGcPncSFgNnRd

5. 在 Cursor 中使用"浏览器"等关键字,触发 MCP 行为,例如:

   用浏览器当前打开页面的性能,分析 lighthouse 数据,判断性能卡点

🎬 演示视频(原文档内):Built-in Retina Display3.mp4

2. 能力汇总

BrowserTools 支持如下能力:

1. 查看日志:
   • getConsoleLogs:查看浏览器控制台日志
   • getConsoleErrors:获取控制台错误信息
   • getNetworkErrors:获取网络错误日志
   • getNetworkLogs:获取所有网络请求日志
   • wipeLogs:清除内存中的浏览器日志
2. 截图与元素选择:
   • takeScreenshot:对当前浏览器标签页进行截图
   • getSelectedElement:获取浏览器中当前选中的元素
3. 审计工具:
   • runAccessibilityAudit:运行可访问性审计
   • runPerformanceAudit:运行性能审计
   • runSEOAudit:运行搜索引擎优化审计
   • runBestPracticesAudit:运行最佳实践审计
   • runNextJSAudit:运行 Next.js 相关审计
4. 调试模式:
   • runDebuggerMode:运行调试器模式,用于调试应用问题
   • runAuditMode:运行审计模式,用于优化 SEO、可访问性和性能

🖼️ 配图待补:YpVKbcs0soOrWBxWyXRcBlO8n8g

3. 适用场景

BrowserTools 提供的能力比较完整,可以覆盖许多前端页面调试场景:

• 基本 Bug 修复:例如上例中的 antd 报错:

  🖼️ 配图待补:P1zCbhOShoEw8fxjKzScJFPOnUg

  这是一个很常规的问题,使用如下 Prompt 即可:

  使用浏览器打开 xxx,分析控制台输出,总结原因并修复

• 分析页面性能:LLM 可借助 MCP 读入页面的 lighthouse 数据等,充分分析后给出性能总结信息,你甚至可以在此基础上要求 LLM 进行修复:

  用浏览器当前打开页面的性能,分析 lighthouse 数据,判断性能卡点

• 修复样式问题:通过截图分析页面样式状态,之后进行修复,例如:

  页面中,body 有一个多余的 margin,请修复

• 网络异常:通过分析网络请求的错误信息(响应内容、响应头等),定位并修复网络问题:

  页面中出现不少网络异常,请仔细分析请求信息、响应信息等,定位问题根因并尝试修复

• 其他异常分析:开发过程中偶尔会遇到一些疑难杂症,很难定位问题到底出在哪,可以通过 BrowserTools MCP 将数据提交给 LLM,让 LLM 尝试分析解决:

  🖼️ 配图待补:AHJYbYN0Io7BozxUrYPctwP1njc