反吹
Vite MCP服务器现在出现故障 Blowback旨在支持各种FE开发服务器，而不仅仅是Vite
模型上下文协议（MCP）服务器，将FE开发服务器与Claude Desktop和Cursor等AI工具集成在一起。
如何使用
命令（克劳德代码）：
claude mcp add blowback -s project -e PROJECT_ROOT=/path/to/your/project -- npx -y blowback-context或者使用json配置：
- 克劳德代码：
{PROJECT_ROOT}/.mcp.json - 光标：
{PROJECT_ROOT}/.cursor/mcp.json
{
"mcpServers": {
"blowback": {
"command": "npx",
"args": ["-y", "blowback-context"],
"env": {
"PROJECT_ROOT": "/path/to/your/project"
}
}
}
}环境变量
PROJECT_ROOT：项目根路径（可选，默认为当前工作目录）ENABLE_BASE64：在工具响应中包含base64编码的图像（默认值：false/启用时影响令牌使用和上下文窗口）
主要特点
- 本地开发服务器与MCP服务器的集成
- 通过MCP捕获和传输浏览器控制台日志
- 基于检查点的日志管理
- 屏幕截图和SQLite数据库管理
- HMR（热模块更换）事件监测
- 浏览器自动化和元件检查
初始化提示
这 init prompt为AI助手提供如何有效使用以下功能的指导：
光标聊天 不支持MCP提示功能，因此此功能不可用。（建议使用Claude Code） 如果需要，手动输入以下提示：
您可以通过插入以下内容来使用检查点功能 `` 创建当前状态的命名快照。 data-id属性是检查点的唯一标识符。 当检查点处于活动状态时，浏览器中生成的控制台日志用检查点ID标记，可以单独查询。 注意：在某些开发环境中，保存文件时会触发热重新加载，因此请仔细考虑元标记更改与要观察的更改之间的顺序。在进行要跟踪的更改之前，请确保设置检查点元标记。 您可以使用截图工具进行截图。捕获的屏幕截图存储在@.mcp_screscent/目录中。
工具
HMR工具
| 工具名称 | 描述 |
|---|---|
get-hmr-events | 检索最近的HMR事件 |
check-hmr-status | 检查HMR状态 |
备注：HMR连接是可选的，不是必需的。浏览器启动时，HMR事件监视会自动启动。
浏览器工具
| 工具名称 | 描述 |
|---|---|
start-browser | 启动浏览器实例并导航到开发服务器。HMR监测自动启动 |
capture-screenshot | 捕获当前页面或特定元素的屏幕截图。返回屏幕截图ID和资源URI |
get-element-properties | 检索特定元素的属性和状态信息 |
get-element-styles | 检索特定元素的样式信息 |
get-element-dimensions | 检索特定元素的维度和位置信息 |
monitor-network | 在指定的持续时间内监视浏览器中的网络请求 |
get-element-html | 检索特定元素及其子元素的HTML内容 |
get-console-logs | 使用可选筛选从浏览器会话中检索控制台日志 |
execute-browser-commands | 安全执行预定义的浏览器命令 |
帮助工具
| 工具名称 | 描述 |
|---|---|
how-to-use | 提供有关如何使用服务器特定功能的说明 |
资源
截图
用于查询所有捕获的屏幕截图的资源。您可以查询由捕获的屏幕截图参考ID capture-screenshot 使用各种标准的工具。
与参考ID对应的图像在 {PROJECT_ROOT}/.mcp_screenshot/ 目录。
- URI：
screenshot:// - 返回所有屏幕截图的列表
按url截图
基于URL路径查询特定屏幕截图的资源。
备注：从1.0版本开始，默认情况下禁用通过资源的Blob响应，而是返回文件引用信息
- URI模板：
screenshot://{+path} - 例子：
screenshot://localhost:5173/about - 使用没有协议的URL路径（http://，https://）
数据存储结构
屏幕截图存储
- 屏幕截图：存储在
{PROJECT_ROOT}/.mcp_screenshot/目录 - 元数据：在SQLite数据库的临时目录中管理
- 建议添加
.mcp_screenshot/目录到.gitignore
日志管理系统
- 捕获浏览器控制台日志并将其保存到文件中以供查询
- 检查点日志仅在检查点处于活动状态时保存
检查点系统
检查点如何工作
- 检查点用于管理特定版本的快照、日志、屏幕截图等
- 当 `
插入head`，使用数据id属性作为标识符单独记录数据
架构和数据流
核心组件
- MCP服务器：使用模型上下文协议SDK向AI工具公开工具和资源的中央模块。
- 浏览器自动化：使用Playwright控制Chrome进行视觉检查、屏幕截图捕获和DOM操作。
- 检查点系统：维护浏览器状态的快照，以便进行比较和测试。
- SQLite数据库：高效管理屏幕截图元数据，并支持基于URL的快速查询。
数据源和状态管理
服务器维护着几个重要的数据存储：
- HMR事件记录：从开发服务器跟踪最近的HMR事件（更新、错误）。
- 控制台消息日志：捕获浏览器控制台输出以进行调试。
- 检查点存储：存储浏览器状态的命名快照，包括DOM快照。
- 屏幕截图存储：将图像保存在项目目录中，并使用SQLite管理元数据。
通信流
- MCP客户端→ 开发服务器:
- MCP客户端更改源代码，开发服务器检测到更改 - 开发服务器自动更新浏览器或发出HMR事件
- Web浏览器→ MCP服务器:
- HMR事件和控制台日志通过Playwright捕获 - MCP服务器查询浏览器的当前状态或捕获屏幕截图
- MCP服务器→ MCP客户端:
- 服务器将HMR事件转换为结构化响应 - 为MCP客户端提供查询HMR状态、捕获屏幕截图等工具
状态维护
服务器维护以下引用对象：
- 当前浏览器和页面实例
- 最近的HMR活动