2026年Cursor+BrowserTools，让你前端调试效率翻倍

科技前沿 • 2026-04-07 20:39 • 阅读 0

大家好，我是讯享网，很高兴认识大家。这里提供最前沿的Ai技术和互联网信息。

MCP 推出已有一段时间，之前我也陆续分享过一些相关内容，但大多偏基础。

《一文读懂MCP：助力大模型接入合规“四肢” - 掘金》

《自动Bug清道夫：Gitee MCP Server初探 - 掘金》

《从零构建自己的MCP Server - 掘金》

经过一段时间的使用，打算为大家分享一些具体的 MCP 使用体验与心得，希望能为大家带来一些启发。

首先，介绍一下今天的主角：。

该工具的核心目标是通过 AI 赋能浏览器交互，提升浏览器相关工作效率，并简化调试流程。

通过 BrowserTools，我们可以让 AI 代码编辑器（比如 Cursor）和代理工具（比如 CherryStudio）操纵以下内容：

这样就大大增强了我们 AI 的能力范围，覆盖从基础日志监控到复杂的性能优化，甚至可替代传统工具（如 Playwright）实现更智能的自动化操作。

BrowserTools 主要包括三个组件：

具体安装过程就是 BrowserTools 的三个组件。

1、点击 Chrome扩展下载扩展，或直接公众号后台回复“”下载。

2、Chrome 中地址栏输入打开「管理扩展」页面。

3、在页面右上角开启「开发者模式」，然后点击「加载已解压的扩展程序」。

4、选择之前下载并解压的扩展文件夹，选择后即可在扩展列表中看到 BrowserToolsMCP。

记得选择文件夹，就是里面直接是html、js代码的那个。

1、Cursor 中打开「设置」→「功能」→「MCP 服务器」，点击「添加新 MCP 服务器」。

2、在打开的 mcp.json 中配置 MCP Server。

3、确认 browser-tools 前面的状态，显示绿色即证明成功。

在终端任意目录运行以下命令：

注意：服务默认占用端口 3025，请确保该端口未被占用。

安装成功后，可以在浏览器“开发者工具”中打开，如下图。

给大家展示一下修复前端开发过程报错的场景。

以下是设置的前端报错场景。

直接在 Cursor 对话框中输入 “修复页面控制台报错”。

Cursor 会自动调用 BrowserTools 获取控制台错误，并进行修复。

整个过程不再需要我们打开 “开发者工具” - “控制台” 复制错误信息，还是比较舒服的。

唯一一点不太好的是，Claude 3.7 thinking 代码能力确实强，但是它有点啰嗦。

通过本次分享，相信大家已经对 BrowserTools 有了初步的认识。

希望未来大家能将 BrowserTools 更好地应用到日常开发中，充分发挥 AI 助力开发效率的价值。