关键词

Vite热更新浏览器自动化前端开发调试工具

使用说明

项目简介

Vite MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在为 Cursor 等 MCP 客户端提供与 Vite 开发服务器集成的能力。它允许开发者通过 Cursor 等工具，实时监控和操作正在 Vite 开发服务器上运行的前端应用。

主要功能点

  • Vite 热模块替换 (HMR) 事件支持: 实时捕获和传递 Vite 开发服务器的 HMR 事件，例如文件更新和错误。
  • 浏览器自动化: 通过 Puppeteer 控制浏览器，实现自动化操作，例如启动浏览器、导航页面、截图、获取元素属性和样式等。
  • 控制台日志管理: 捕获和管理浏览器控制台日志，支持基于检查点的日志存储和查询。
  • 检查点系统: 允许创建应用状态的快照（检查点），用于比较不同状态下的日志、截图等。

安装步骤

无需安装，作为一个独立的 Node.js 项目，可以直接运行。通常，MCP 客户端（如 Cursor）会负责启动和管理该服务器进程。

服务器配置

MCP 客户端需要配置以下 JSON 信息以连接到 Vite MCP Server。以下配置信息应添加到 MCP 客户端（如 Cursor）的服务器配置中：

{
  "vite-hmr": {
    "command": "npx",
    "args": ["-y", "vite-mcp-server"]
  }
}

配置参数说明：

  • 'vite-hmr': 服务器名称，在 MCP 客户端中用于标识和引用该服务器。
  • 'command': 启动 MCP 服务器的命令，这里使用 'npx' 来运行 'vite-mcp-server'。确保你的环境中可以执行 'npx' 命令，并且 'vite-mcp-server' 包已安装或可以被 'npx' 找到。
  • 'args': 传递给启动命令的参数，'-y' 用于跳过 'npm install' 的确认步骤（如果需要，根据实际情况调整）。

基本使用方法

  1. 确保已安装 Node.js 和 npm 或 yarn。
  2. 确保你的前端项目使用 Vite 开发服务器，并且 Vite 服务器已启动。
  3. 在 MCP 客户端（如 Cursor）中配置上述服务器配置信息。
  4. 启动 MCP 客户端，它将自动连接到 Vite MCP Server。
  5. 使用 Cursor 提供的工具，例如 'init-vite-connection' 连接到 Vite HMR 服务器，'start-browser' 启动浏览器并导航到 Vite 应用地址，然后使用其他工具如 'get-console-logs'、'capture-screenshot' 等来获取信息或执行操作。

重要提示： Vite MCP Server 依赖于你的前端项目运行 Vite 开发服务器。请先确保你的 Vite 开发服务器正常运行，然后再配置和使用 Vite MCP Server。

信息

分类

开发者工具

访问项目