比Playwright更高效！BrowserTools MCP 让Cursor直接控制当前浏览器，AI调试+SEO审计效率狂飙！

🍹 Insight Daily 🪺

Aitrainee | 公众号：AI进修生

Hi，这里是Aitrainee，欢迎阅读本期新文章。

在可能的路上把工具的Buff叠满，就能效率起飞了。

今天我们来说说@tedx_ai 大神做的 BrowserTools工具 —— 能让 Cursor 这样的 AI 编辑器，直接控制你的浏览器， 调试代码更爽，开发体验直接起飞。

如果你不了解MCP，那么以往我有多篇文章介绍MCP概念、实践，你可以滑到文末查看。

和以前介绍过的浏览器自动化MCP不同，BrowserTools MCP 与配套 Chrome 扩展 运行，直接与用户当前浏览器会话交互，无需启动新实例。

比起Playwright 和 Puppeteer ，我更喜欢用BrowserTools。

了解 mcp-playwright、browser-tools-mcp、blender-mcp

mcp-playwright：新手入门级 MCP 服务器

这个简单，适合新手了解 MCP 服务器怎么建。

它主要提供：

资源列表（比如截图、浏览器日志）

工具列表（比如导航、点击、填表）

MCP 服务器要告诉 AI 自己能干啥，就像 API 文档一样，每个功能、参数都要写清楚。

它通过调用 Playwright 来操作浏览器。

这个在windows上配置好后让他截取图片。可能会显示红色错误：类型不对。其他功能正常。mac上正常。

browser-tools-mcp：更强大的浏览器操作 MCP

https://github.com/AgentDeskAI/browser-tools-mcp

这个项目也能操作浏览器，功能更多。

除了导航、截图，还能调试网页、分析性能。

它不用 Playwright，而是通过浏览器插件来操作，可以直接在我们常用的浏览器里用。

为了实现这个，它需要：

• MCP 服务器和插件之间能通信。

• 给插件很多权限。

它由三部分组成：

• MCP 服务器： 提供 MCP 接口，调用 Node 服务器。

• Node 服务器： 中间层，连接 MCP 服务器和 Chrome 插件，还能用 Puppeteer 和 Lighthouse 分析网页性能、SEO 等。

• Chrome 插件： 响应请求，调用 Chrome 的功能，包括调试。

还有一个说到的3d建模mcp

这是用 Python 开发的，上面两个浏览器的 MCP 都是用 JS 实现。

不过两种语言都有成熟的框架可以用：

• NodeJS: modelcontextprotocol/sdk

• Python: MCP python SDK，它提供了修饰器定义 tools，代码结构很简单

它的结构和 browser-tools-mcp 类似，包含两个部分：

• Blender 插件：在 Blender 内创建套接字服务器以接收和执行命令的插件

• MCP 服务器：实现模型上下文协议并连接到 Blender 插件的 Python 服务器

具体实现上牵涉到很多 blender 专门的知识。

我们继续说browser-tools-mcp：

它还有其他浏览器自动化MCP不具备的这种端到端的功能：

通过Lighthouse 运行SEO、性能和代码质量扫描：

针对NextJS 应用的SEO审计。

我让它帮我分析我正在开发的一个网站（复刻实验，MCP工具收录站）：

这是它的结果：

端到端的性能优化、SEO改进策略会提供给你：

老方便了感觉。。

用了 MCP 服务器工具， AI 编辑器就能做到这些：

• 看控制台日志和报错

• 获取 XHR 网络日志：返回所有最近的 xhr 请求，这些请求导致 HTTP 成功响应代码（如 200 或 300）

• 获取 XHR 网络错误：返回最近返回 400 或 500 HTTP 错误响应代码的 xhr 请求

  
  
  
• 网页截图，还能自动贴到 Cursor

比如使用这个工具的时候，你在Cursor中试试这些指令：

• “这不对劲…… 启动调试模式！”。（ 进入 “调试模式”，他会用各种工具找 bug，进入 “审计模式”，全面检查 Web 应用）

它这个模式会自动控制你的Cursor，它来和Cursor对话。。

很有意思。

• “帮我改下选中的元素，x、y、z 都改了！”
• “我要优化 SEO 和性能，进审计模式！”
• “检查下控制台和网络日志，看看哪出问题了？”
• “界面有点怪，截个屏看看。”
  
  

BrowserTools MCP 不仅捕获数据，还允许编辑 DOM 元素，这意味着它可以控制本地浏览器进行特定操作。例如：“你能编辑当前选定的元素来执行 x、y 和 z 吗？”

使用 chrome dev 工具时，你可以使用元素选择器工具选择 UI 中的任何组件。

选择一个元素后，你将能够要求 Cursor 编辑或查找代码中当前选定的元素。这使得遍历代码库和进行 UI 更改变得更加容易。

此外，再试试使用browser-tools来测试firecrawl.dev网站

可以看到它的截图功能在正常的，此前在使用Playwright 和 Puppeteer 浏览器自动化工具的时候。他们在Windows下截图往往会报类型错误。

再言MCP概念和前景

根据这篇不错的文章介绍：https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling/，我们来看看MCP一些关键的地方：

MCP是个让AI模型接入外部世界的开放协议。

这个协议定义了AI如何调用工具、获取数据和与服务交互的规则。简单来说，就是给AI装上了”手脚”，让它能做实际的事情。

看下图的一个具体示例：

当用户想发邮件时，不管是在Cursor还是Claude Desktop，都可以使用同一个Resend MCP服务器。AI选择合适的工具（这里是发邮件工具），然后通过统一的接口完成任务。

这种设计的好处在于：不同的AI客户端可以共享同一套工具服务。你换了AI应用，工具还能用。

对开发者来说，不用为每个AI平台都写一套工具，写一次就能到处用，省事又高效。

但MCP不是凭空出现的，它从LSP（语言服务器协议）那里借鉴了灵感。

LSP是怎么工作的？当你在编辑器里敲代码时，编辑器会向语言服务器询问：要不要自动补全？这里有没有错误？无论你用的是VSCode还是Vim，只要连接同一个语言服务器，体验都差不多。

MCP把这个想法推得更远了。

关键区别在哪？LSP主要是被动响应，等你敲键盘才动作。而MCP是为AI代理设计的，让它们能自主工作。

AI能根据当前情况，自己决定：

• 用哪些工具
• 按什么顺序用
• 怎么把这些工具串起来完成任务

图中可以看到，不管是Claude Desktop还是Cursor，都能通过MCP连接到Resend、Supabase、Notion这些服务。

MCP还加了个人类参与的环节，让人类可以提供额外信息，审批执行过程。

简单说，LSP让不同编辑器用同一个语言服务，MCP则让不同AI用同一套工具服务。

开发者的小确幸：不用离开家门口

程序员都有一个梦想：”能不能不离开IDE就把活干了？”MCP服务器就是来实现这个梦想的。

以前查数据库状态要切到Supabase，现在可以直接用Postgres MCP服务器在IDE里执行SQL查询。管理缓存？Upstash MCP服务器帮你搞定。

更厉害的是Browsertools MCP，让AI助手能直接访问浏览器环境，实时获取反馈和调试信息。

看截图里，Cursor的AI正在帮忙修复游戏bug。它直接调用MCP工具获取控制台日志，分析游戏过早结束的原因，还能搜索相关代码。整个过程都在IDE里完成，不用切来切去。

MCP还有个厉害之处：可以通过爬取网页或者根据文档自动生成服务器，给AI提供精准的上下文。开发者不用写大量胶水代码，直接从现有文档或API创建MCP服务器，AI立刻就能用上这些工具。

在这篇文章中我提到使用AI来构建/安装MCP的逻辑是这样的：

2分钟构建自己的MCP服务器，从算数到 Firecrawl MCP（手动挡 + AI档）

简单说，MCP让你的IDE变成了一个超级工作站，AI助手能借此获取更多信息，执行更多命令，帮你更好地完成工作。

MCP生态圈正在成长，看看这张”家族照”！

这张市场地图展示了MCP世界里谁在玩，玩什么。虽然还有不少空白区域，但已经能看出一些趋势。

先看上面的玩家：

• 客户端这边有Claude、Cursor、LibreChat等聊天和编码工具
• 服务器那边有数据库、设计工具、调试工具等各种类型

市场上已经出现了像Glama、Mintify、OpenTools这样的MCP托管服务平台，还有专门的服务器生成和托管服务。这些东西我们此前的文章或多或少都有介绍：

最新MCP托管平台：让Cursor秒变数据库专家，一键对接Github，开发效率暴增！

有趣的是，目前高质量MCP客户端基本都是写代码用的。这不奇怪，毕竟开发者总是最早尝鲜新技术的一群人。

随着时间推移，会有更多商业导向的客户端出现。

另外，现在的MCP服务器多是本地优先、针对单个用户的。这是因为MCP目前只支持SSE和命令式连接。未来会支持可流式HTTP传输，生态

系统会更加丰富。这个未来可聊，因为已经看到有人做出这样的。

现在部署方面，有像Cloudflare、Smithery这样的平台帮你解决规模问题。与此同时，Toolbase等连接管理平台开始简化本地优先的 MCP 密钥管理和代理。 

简单说，MCP正在从”技术活”变成”人人能玩的东西”，生态系统越来越完善，让AI工具更容易流通和使用。

One More Thing

BrowserTools MCP的安装相比于其他MCP有些麻烦，但是也和下面这些文章介绍的类似安装。

不过我还会在最新合集文章中，带你重新在mac、windows中安装一遍，尤其是涉及一些其他MCP没有的报错的解决，以及一些实践注意事项。

文章：手把手教你配置BrowserTools MCP，Windows 和 Mac全流程，关键命令别忽略。

合集入口：2分钟构建自己的MCP服务器，从算数到 Firecrawl MCP（手动挡 + AI档）

合集的下下一篇可能会是搭建一个MCP服务托管网站的教程。。待

至于BrowserTools 自动化网页控制台调试错误的就不演示了，相关文章，特别是实践类别有提到：

MCP是什么：Windsurf Wave3：MCP协议让AI直接读取控制台错误，自动化网页调试不用复制粘贴了！Tab智能跳转、Turbo模式。

Cline的MCP商店来了。

MCP怎么配置、报错解决：Windows下MCP报错的救星来了，1分钟教你完美解决Cursor配置问题。

MCP实践：Cursor + MCP：效率狂飙！一键克隆网站、自动调试错误，社区：每个人都在谈论MCP！

最新MCP托管平台：让Cursor秒变数据库专家，一键对接Github，开发效率暴增！

Blender + MCP 从入门到实践：安装、配置、插件、渲染与快捷键一文搞定！

以下，本号知识星球（汇集ALL合集和其他）：

以上。

🌟 知音难求，自我修炼亦艰，抓住前沿技术的机遇，与我们一起成为创新的超级个体（把握AIGC时代的个人力量）。

参考链接：
[1] https://a16z.com/a-deep-dive-into-mcp-and-the-future-of-ai-tooling/
[2] https://tereza-tizkova.medium.com/which-llm-is-really-the-best-3920b5af2ae6

点这里👇关注我，记得标星哦～

（文：AI进修生）