Blowback

Vite MCP Server 现在是 Blowback

Blowback 旨在支持各种 FE 开发服务器，而不仅仅是 Vite

向 FE 开发服务器添加模型上下文协议 (MCP) 服务器，以支持与 Cursor 的集成。

主要特性

• FE 开发服务器与 MCP 服务器的集成
• 浏览器控制台日志捕获和通过 MCP 传输
• 基于检查点的日志管理

安装

将服务器添加到您的 Cursor MCP 配置：

{
  "blowback": {
    "command": "npx",
    "args": ["-y", "blowback-context"]
  }
}

资源

console-logs

用于检索浏览器控制台日志的资源。

注意：Cursor 目前不支持 MCP 资源功能。请改用 get-console-logs 工具。

screenshot

用于捕获和管理屏幕截图的资源。

注意：与其他资源一样，Cursor 目前不支持此功能。请改用 capture-screenshot 工具。

工具

HMR 工具

工具名称	描述
get-hmr-events	检索最近的 HMR 事件
check-hmr-status	检查 HMR 状态

浏览器工具

工具名称	描述
start-browser	启动浏览器实例并导航到 Vite 开发服务器
capture-screenshot	捕获当前页面或特定元素的屏幕截图。屏幕截图保存到磁盘。由于 MCP 客户端的限制，您可能需要手动将保存的屏幕截图图像传输到您的编辑工具
get-element-properties	检索特定元素的属性和状态信息
get-element-styles	检索特定元素的样式信息
get-element-dimensions	检索特定元素的尺寸和位置信息
monitor-network	监控浏览器中指定持续时间的网络请求
get-element-html	检索特定元素及其子元素的 HTML 内容
get-console-logs	从浏览器会话中检索控制台日志，并可选择进行过滤
execute-browser-commands	安全地执行预定义的浏览器命令

如何使用工具

工具名称	描述
how-to-use	提供有关如何使用该工具的说明

日志管理系统

日志管理方法

• 所有浏览器控制台日志都存储在日志文件中
• 您可以使用 get-console-logs 工具查询特定检查点的日志

检查点系统

检查点操作方法

• 检查点用于管理特定版本的快照、日志、屏幕截图等。
• 当 <meta name="__mcp_checkpoint" data-id=""> 插入到 head 中时，数据将使用 data-id 属性作为标识符单独记录

架构和数据流

核心组件

1. MCP 服务器: 基于模型上下文协议 SDK 的中心模块，为 MCP 客户端提供工具。

2. 浏览器自动化: 使用 Puppeteer 控制 Chrome 以直观地检查更改。

3. 检查点系统: 维护浏览器状态的快照以进行比较和测试。

数据源和状态管理

服务器维护几个重要的数据存储：

• HMR 事件记录: 跟踪来自 Vite 的最近 HMR 事件（更新、错误）。
• 控制台消息日志: 捕获浏览器控制台输出以进行调试。
• 检查点存储: 存储浏览器状态的命名快照，包括 DOM 快照。

通信流程

1. MCP 客户端 → 开发服务器:

   • MCP 客户端更改源代码，开发服务器检测到更改
   • 开发服务器更新浏览器或自动发出 HMR 事件

2. Web 浏览器 → MCP 服务器:

   • HMR 事件和控制台日志通过 Puppeteer 捕获。
   • MCP 服务器查询浏览器的当前状态或捕获屏幕截图

3. MCP 服务器 → MCP 客户端:

   • 服务器将 HMR 事件转换为结构化响应。
   • 提供工具供 MCP 客户端查询 HMR 状态和捕获屏幕截图。

状态维护

服务器维护以下对象的引用：

• 当前浏览器和页面实例
• 最近的 HMR 事件