# mcp-debug-tool

**Repository Path**: yulang_admin_1/mcp-debug-tool

## Basic Information

- **Project Name**: mcp-debug-tool
- **Description**: 一个功能强大的MCP（Model Context Protocol）调试工具，支持HTTP、SSE和WebSocket三种通信方式的调试。
- **Primary Language**: Java
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-19
- **Last Updated**: 2026-04-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MCP调试工具

一个功能强大的MCP（Model Context Protocol）调试工具，支持HTTP、SSE和WebSocket三种通信方式的调试。

## 功能特性

### 1. HTTP调试
- ✅ 支持所有HTTP方法（GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS）
- ✅ 自定义请求头（Headers）
- ✅ 请求体编辑（支持JSON格式）
- ✅ 响应格式化展示
- ✅ 响应时间统计
- ✅ 请求历史记录

### 2. SSE调试（Server-Sent Events）
- ✅ 实时单向消息接收
- ✅ 连接状态监控
- ✅ 消息历史展示
- ✅ 自动重连机制
- ✅ 消息时间戳

### 3. WebSocket调试
- ✅ 双向实时通信
- ✅ 消息发送和接收
- ✅ 连接状态管理
- ✅ 消息分类展示（发送/接收/系统）
- ✅ 自动滚动到最新消息

## 技术栈

### 后端
- Spring Boot 3.2.0
- Spring WebFlux（SSE支持）
- Spring WebSocket
- Apache HttpClient 5
- Lombok

### 前端
- Vue 3.4
- Ant Design Vue 4.1
- Vite 5.0
- Axios
- Vue Router 4

## 快速开始

### 环境要求
- JDK 17+
- Node.js 18+
- Maven 3.6+

### 开发模式

#### 1. 启动后端服务
```bash
cd e:\WorkSpace\Java\2026\mcp-debug-tool
mvn spring-boot:run
```
后端服务将运行在 http://localhost:8080

#### 2. 启动前端开发服务器
```bash
cd frontend
npm install
npm run dev
```
前端开发服务器将运行在 http://localhost:3000

### 生产模式

#### 1. 构建前端
```bash
cd frontend
npm run build
```
前端资源会自动打包到 `src/main/resources/static` 目录

#### 2. 构建后端
```bash
cd ..
mvn clean package
```

#### 3. 运行
```bash
java -jar target/mcp-debug-tool-1.0.0.jar
```
访问 http://localhost:8080

## 项目结构

```
mcp-debug-tool/
├── src/main/java/com/mcp/debug/
│   ├── McpDebugApplication.java      # 启动类
│   ├── config/                        # 配置类
│   │   ├── CorsConfig.java           # 跨域配置
│   │   └── WebSocketConfig.java      # WebSocket配置
│   ├── controller/                    # 控制器
│   │   ├── HttpDebugController.java  # HTTP调试接口
│   │   └── SseDebugController.java   # SSE调试接口
│   ├── service/                       # 服务层
│   │   ├── HttpDebugService.java     # HTTP调试服务
│   │   └── SseDebugService.java      # SSE调试服务
│   ├── model/                         # 数据模型
│   │   ├── HttpRequest.java          # HTTP请求模型
│   │   ├── HttpResponse.java         # HTTP响应模型
│   │   └── Result.java               # 统一响应结果
│   └── websocket/                     # WebSocket
│       └── McpWebSocketHandler.java  # WebSocket处理器
├── src/main/resources/
│   ├── static/                        # 前端静态资源（打包后）
│   └── application.yml                # 配置文件
├── frontend/                          # 前端项目
│   ├── src/
│   │   ├── views/                     # 页面组件
│   │   │   ├── HttpDebug.vue         # HTTP调试页面
│   │   │   ├── SseDebug.vue          # SSE调试页面
│   │   │   └── WebSocketDebug.vue    # WebSocket调试页面
│   │   ├── layout/                    # 布局组件
│   │   │   └── Layout.vue            # 主布局
│   │   ├── router/                    # 路由配置
│   │   │   └── index.js
│   │   ├── App.vue                    # 根组件
│   │   └── main.js                    # 入口文件
│   ├── package.json
│   └── vite.config.js
└── pom.xml
```

## 使用说明

### HTTP调试
1. 选择请求方法（GET/POST等）
2. 输入请求URL
3. （可选）添加请求头
4. （可选）填写请求体（POST/PUT/PATCH时）
5. 点击"发送请求"按钮
6. 查看响应结果（状态码、响应头、响应体）

### SSE调试
1. 输入SSE端点URL
2. 点击"连接"按钮
3. 实时查看接收到的消息
4. 点击"断开"关闭连接
5. 可点击"清空消息"清除历史记录

### WebSocket调试
1. 输入目标WebSocket URL
2. 点击"连接"按钮
3. 在左侧输入框编写消息
4. 点击"发送消息"发送
5. 右侧查看发送和接收的消息记录
6. 点击"断开"关闭连接

## API接口

### HTTP调试
- `POST /api/http/request` - 执行HTTP请求
  ```json
  {
    "url": "https://api.example.com/users",
    "method": "GET",
    "headers": {"Authorization": "Bearer token"},
    "body": "",
    "timeout": 30000
  }
  ```

### SSE调试
- `GET /api/sse/connect?url={targetUrl}` - 建立SSE连接
- `POST /api/sse/disconnect/{sessionId}` - 断开SSE连接

### WebSocket调试
- `WS /ws/mcp?target={targetUrl}` - WebSocket代理连接

## 注意事项

1. **跨域问题**: 开发模式下已配置代理，生产模式需注意CORS配置
2. **超时设置**: HTTP请求默认超时30秒，可根据需要调整
3. **消息限制**: SSE和WebSocket最多保留100条消息，避免内存溢出
4. **安全性**: 生产环境建议添加认证和授权机制

## 常见问题

### Q: 前端无法连接后端？
A: 确保后端服务已启动（http://localhost:8080），检查浏览器控制台是否有跨域错误。

### Q: SSE连接失败？
A: 检查目标URL是否正确，确保目标服务器支持SSE协议。

### Q: WebSocket连接失败？
A: 检查目标URL格式（ws://或wss://），确保目标WebSocket服务正常运行。

## 许可证

MIT License

## 更新日志

### v1.0.0 (2026-04-19)
- ✨ 初始版本发布
- ✨ 支持HTTP调试
- ✨ 支持SSE调试
- ✨ 支持WebSocket调试
- ✨ 用户友好的界面设计