Information
Blowback
Vite MCP Server 现已更名为 Blowback
Blowback 的目标是支持各种前端开发服务器，而不仅仅是 Vite
在前端开发服务器中添加一个 Model Context Protocol (MCP) 服务器以支持与 Cursor 的集成。
主要功能
前端开发服务器与 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 工具查询特定检查点的日志
检查点系统
检查点操作方法
检查点用于管理特定版本的快照、日志、屏幕截图等
当 被插入到 head 中时，数据将使用 data-id 属性作为标识符单独记录
架构和数据流
核心组件
MCP 服务器: 基于 Model Context Protocol SDK 的中央模块，为 MCP 客户端提供工具。
浏览器自动化: 使用 Puppeteer 控制 Chrome 以可视化检查更改。
检查点系统: 维护浏览器状态的快照，用于比较和测试。
数据源和状态管理
服务器维护几个重要的数据存储：
HMR 事件记录: 跟踪来自 Vite 的最近 HMR 事件（更新、错误）。
控制台消息日志: 捕获浏览器控制台输出，以便调试。
检查点存储: 存储浏览器状态的命名快照，包括 DOM 快照。
通信流程
MCP 客户端 → 开发服务器:
MCP 客户端修改源代码，开发服务器检测到该更改
开发服务器自动更新浏览器或发出 HMR 事件
Web 浏览器 → MCP 服务器:
通过 Puppeteer 捕获 HMR 事件和控制台日志。
MCP 服务器查询浏览器的当前状态或捕获屏幕截图
MCP 服务器 → MCP 客户端:
服务器将 HMR 事件转换为结构化的响应。
为 MCP 客户端提供查询 HMR 状态和捕获屏幕截图的工具。
状态维护
服务器维护以下引用对象：
当前浏览器和页面实例
最近的 HMR 事件