Cursor+claude3.7+Browser Tools MCP：手把手教你使用AI编码神器

在开发的世界里，浏览器报错就如同 “拦路虎”，常常让开发者们焦头烂额。辛苦编写的代码，一运行却报错连连，花费大量时间排查，却依旧难以找到问题根源。别担心，今天为大家带来一组超强组合，让代码纠错变得轻松高效！

Cursor，作为一款智能的 AI 编程助手，在代码编写和问题排查方面已展现出出色能力。但你知道吗？当它与 Browser Tools MCP 携手，将解锁更为强大的功能！Browser Tools MCP 基于 Anthropic 的 Model Context Protocol（MCP）开发，是一款能够实现浏览器监控与交互的强大工具，堪称 Cursor 的 “超级外挂”。

一、配置教程，简单几步轻松搞定

1、添加并配置 MCP 服务

在 Cursor 中添加 MCP 服务是第一步。这需要找到 mcp.json 文件并进行编辑，将 browser – tools – MCP 服务的相关信息配置进去，完成后保存文件。接着，返回 Cursor Settings，此时，配置好的 MCP 服务已就绪。

mcp.json配置文件信息

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

2、安装 Chrome 插件

Chrome 插件是实现强大功能的关键一环。前往github，下载browser-tools-mcp Chrome 插件，插件地址到github上搜索【browser-tools-mcp】即可。下载完成后，打开chrome拓展插件开发者模式，将下载好的文件拖到chrome浏览器，即可完成安装。安装成功后，Cursor将能够获取chrme浏览器控制台、网络等详细信息。

3、运行 browser – server

在终端命令行中输入：

npx @agentdeskai/browser-tools-server@1.2.0

轻松按下回车键，等待运行完成。至此，所有准备工作全部大功告成，是不是很简单？

二、实机演示，效果惊艳全场

为了让大家更直观地感受这一组合的强大之处，我们进行一场实机演示。现在我们有一个绚丽的烟花特效 HTML 项目，初始运行时，烟花在浏览器中绚烂绽放，一切正常。让我们人为制造一些报错信息，对代码进行修改后刷新页面，浏览器报错，烟花无法正常释放。

修改后

浏览器报错

这时，将问题交给 Cursor。Cursor 如同被激活了超能力，迅速调用 MCP tool 中的服务，通过 Browser Tools 获取浏览器的 console、network 日志，甚至还能获取屏幕截图信息。短短片刻，便能精准定位问题，清晰找出报错原因，并给出有效的解决方案。原本可能耗费大量时间的问题排查工作，现在轻松快速地完成，开发效率得到了极大提升。

三、结语：

在AI飞速发展的当下，MCP插件为AI编码带来重大变革。借助 MCP插件，cursor 展现出强大能力，能依据浏览器报错快速、精准定位问题。比如在复杂网页交互功能开发中，面对脚本错误、样式加载异常等多种报错，cursor 可从繁杂报错代码里迅速锁定关键错误点。cursor 还能深挖问题根源，综合考量代码结构、数据流向与系统配置，找出深层原因，而非仅停留在错误表象。这极大避免了开发人员盲目尝试。以往缺乏此类高效工具时，开发人员解决类似问题需耗费数倍甚至数十倍时间。

总之，MCP 插件让 cursor 在定位问题、剖析原因与提供方案上表现卓越，大幅提升开发效率，为软件行业发展增添强劲动力。