cursor在win下配置browser-tools-mcp

browser-tools-mcp这个工具提供了多个功能:

  • 获取控制台日志(Console log)
  • 网络请求监控(Network monitoring)
  • 截图功能(Screenshot capture)
  • 元素选择(Element selection)
  • 浏览器状态分析(Browser state analysis)
  • 可访问性和性能审计(Accessibility and performance audits)sho

首先打开谷歌浏览器拓展管理

点击加载已解压的扩展程序,选择chrome-extension

就是这个

然后重启一下谷歌浏览器

检查环境

node -v
npm -v

在终端安装

npx @agentdeskai/browser-tools-mcp@1.2.0
npx @agentdeskai/browser-tools-server@1.2.0

需要按照正确的顺序启动两个服务:

首先启动 Browser Tools Server:

npx @agentdeskai/browser-tools-server

然后在另一个终端启动 MCP server:

npx @agentdeskai/browser-tools-mcp

在cursor里面设置

名字填写browser-tools-mcp,其中window 环境下 Command 配置是

cmd /c npx -y @agentdeskai/browser-tools-mcp@1.2.0

 效果如下:

注意:

浏览器显示调试信息才算成功

还有

如果安装报错,大概是防火墙的问题,比如

Attempting initial server discovery on startup...
Starting server discovery process
Will try hosts: 127.0.0.1, 127.0.0.1, localhost
Will try ports: 3025, 3026, 3027, 3028, 3029, 3030, 3031, 3032, 3033, 3034, 3035
Checking 127.0.0.1:3025...
Error checking 127.0.0.1:3025: fetch failed
Checking 127.0.0.1:3026...
Error checking 127.0.0.1:3026: fetch failed
Checking 127.0.0.1:3027...
Error checking 127.0.0.1:3027: fetch failed
Checking 127.0.0.1:3028...
Error checking 127.0.0.1:3028: fetch failed
Checking 127.0.0.1:3029...

将3025到3030的端口允许本机连接即可

    <think>好的,用户想找与Cursor MCP相关的工具推荐。首先,我需要明确什么是Cursor MCP。根据引用[1]和[2],Cursor Talk To Figma MCP是一个允许在Cursor IDE中与Figma设计文件直接交互的项目,方便开发者同步设计资源和代码。而引用[3]提到的浏览器工具MCP可以监控浏览器日志,适合调试。引用[4]则介绍了Cursor插件的安装和使用方法,提到了Prettier等插件。 用户可能需要的是能够提升在Cursor中使用MCP功能的工具或插件。首先,基础的MCP工具如Figma集成和浏览器日志监控已经存在,但用户可能还需要其他辅助工具。例如,代码格式化插件如Prettier(引用[4])能帮助保持代码整洁,这对使用MCP项目很重要。此外,是否需要调试工具或协作工具?比如实时协作插件或API测试工具,这些都能提升开发效率。 另外,用户可能不熟悉如何安装和配置这些插件,所以需要提供安装指南的参考,如引用[4]中的步骤。还要考虑是否需要推荐版本控制工具,如Git集成,方便团队协作。可能还需要自动化工具来简化流程,如自动化测试或部署。最后,综合这些信息,整理出一个清晰的推荐列表,并附上相关引用,确保用户能顺利找到和使用这些工具。</think>### 推荐与Cursor MCP相关的工具及插件 #### 1. **Figma设计协作工具** - **Figma MCP集成插件**:支持在Cursor IDE中直接查看和编辑Figma设计文件,实现设计与代码同步[^1]。 - **功能亮点**: - 实时预览设计资源(如颜色变量、组件库)。 - 自动生成设计稿对应的代码片段。 - **安装方法**:通过Cursor插件市场搜索“Figma MCP”安装[^4]。 #### 2. **浏览器日志监控工具** - **Browser Tools MCP**:用于在Cursor中直接监控浏览器控制台日志、网络请求和性能数据,适合前端调试[^3]。 - **应用场景**: - 调试网页与MCP项目的交互逻辑。 - 分析API请求响应耗时。 #### 3. **代码质量工具** - **Prettier代码格式化插件**:自动格式化代码,保持团队代码风格统一(尤其适用于多人协作的MCP项目)[^4]。 - **配置建议**: -Cursor设置中启用“保存时自动格式化”。 - 自定义`.prettierrc`文件适配项目规范。 #### 4. **API调试与模拟工具** - **Postman Cursor插件**:在IDE内直接发送API请求并测试MCP后端接口。 - **优势**: - 无需切换工具即可调试RESTful API或GraphQL。 - 支持生成代码请求模板(如Python、JavaScript)。 #### 5. **版本控制集成** - **GitLens插件**:增强Cursor内置的Git功能,提供代码提交历史追溯、分支对比等功能[^4]。 - **适用场景**: - 管理MCP项目的迭代版本。 - 快速定位代码变更记录。 #### 6. **自动化测试工具** - **Jest/Cypress插件**:为MCP项目添加单元测试或端到端测试框架,支持测试用例编写与运行。 - **配置步骤**: - 通过Cursor插件市场安装测试插件。 - 在项目中初始化测试配置文件(如`jest.config.js`)。
    评论 1
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包

    打赏作者

    m0_54204465

    你的鼓励将是我创作的最大动力

    ¥1 ¥2 ¥4 ¥6 ¥10 ¥20
    扫码支付:¥1
    获取中
    扫码支付

    您的余额不足,请更换扫码支付或充值

    打赏作者

    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值