0、引言

今天给大家介绍一下在开发过程中非常好用的一款 MCP 工具。其实这款 MCP 工具我之前也用过，但是一直跟某一个 MCP 工具傻傻分不清楚，所以没有感受到他的价值。

这两个名字非常相似的 mcp 工具分别是：

Browser MCP

BrowserTools MCP

1）Browser MCP

Browser MCP 是由 @browsermcp/mcp 提供的 MCP Server，可以用来模拟用户操作浏览器。比如说，有了这个 mcp 之后，大模型就可以自动打开浏览器、点击按钮、输入文字、模拟键盘按键等等

2）BrowserTools MCP

BrowserTools MCP 是由 @agentdeskai/browser-tools-mcp 提供的更强大 MCP Server，它不是模拟用户操作，而是提供开发者工具能力。

也就是说，我用这个 MCP 不是为了去操作浏览器，而是为了去排查问题。

开发过前端项目的朋友都知道，当你开发好一个前端页面，这个时候你会去浏览器打开页面，然后在页面上做一系列操作，测试功能（这就是 Browser MCP 可以帮你干的事）

而当你遇到了一个 bug ，这个时候你会按 F12 打开浏览器开发者工具，通过看 console 或者 network 来排查问题（这就是 BrowserTools MCP 可以帮你干的事情）

它们俩更具体的区别，我总结在下面的表格里面：

下面会重点介绍一下怎么样使用 BrowserTools MCP 来帮你排查问题。

Browser MCP 也会顺带写一下，这个 MCP 非常简单，把 json 配置往编辑器里面添加一下就可以用了，跟 Browser MCP 类似的还有 Playwright 都大差不差

1、Browser MCP

1.1 在 ide 中安装 Browser MCP

MCP 配置

代码块 { "mcpServers": { "browsermcp": { "command": "npx", "args": ["@browsermcp/mcp@latest"] } } }

Cursor 配置 MCP：

在 cursor 设置中，找到添加 mcp 的方法

把上面的 json 复制进去即可

为了更好的阅读体验，来飞书看吧：

https://pk0zg2jkji.feishu.cn/docx/V4UYddgfIowX04xTTjDc9hZKnLL