first commit
This commit is contained in:
douboer
198
web/debug-ui.md
Normal file
198
web/debug-ui.md
Normal file
@@ -0,0 +1,198 @@
|
||||
# 调试指南
|
||||
|
||||
## 已实施的修复
|
||||
|
||||
### 修复1: 连接状态管理
|
||||
- **问题**: 添加服务器时自动尝试连接并失败，导致状态为'error'，无法再次连接
|
||||
- **修复**: 修改 `newServer.ts` 的 `addServer` 函数，默认状态改为 'disconnected'
|
||||
- **位置**: `web/src/stores/newServer.ts` 第 99 行
|
||||
|
||||
### 修复2: 连接失败处理
|
||||
- **问题**: 连接失败后状态设置为'error'，无法重试
|
||||
- **修复**: 修改 `connectServer` 函数，失败时设置为 'disconnected' 而不是 'error'
|
||||
- **位置**: `web/src/stores/newServer.ts` 第 170-174 行
|
||||
|
||||
### 修复3: 断开连接时保存状态
|
||||
- **问题**: 断开连接后状态没有持久化
|
||||
- **修复**: 在 `disconnectServer` 函数中添加 `saveServers()` 调用
|
||||
- **位置**: `web/src/stores/newServer.ts` 第 190 行
|
||||
|
||||
### 修复4: 编辑按钮调试
|
||||
- **问题**: 编辑按钮点击没有响应
|
||||
- **修复**: 添加了详细的 console.log 调试信息
|
||||
- **位置**: `web/src/components/MCPSettings.vue` 第 490-495 行
|
||||
|
||||
## 测试步骤
|
||||
|
||||
### 1. 测试编辑按钮功能
|
||||
|
||||
1. 打开浏览器: http://localhost:5173
|
||||
2. 打开开发者工具 (F12 或 Cmd+Option+I)
|
||||
3. 切换到 Console 标签
|
||||
4. 点击任意服务器的"编辑"按钮
|
||||
5. **预期输出**:
|
||||
```
|
||||
🔍 打开服务器详情: {id: "...", name: "...", ...}
|
||||
✅ 详情页状态: true {id: "...", name: "...", ...}
|
||||
```
|
||||
6. **预期行为**: 应该弹出服务器详情对话框
|
||||
|
||||
**如果没有输出**:
|
||||
- 检查按钮是否正确绑定了 `@click="openServerDetail(server)"`
|
||||
- 检查是否有 JavaScript 错误
|
||||
|
||||
**如果有输出但没有弹窗**:
|
||||
- 检查 `showServerDetail` 是否正确控制 modal 显示
|
||||
- 检查 `MCPServerDetail` 组件的 props 绑定
|
||||
|
||||
### 2. 测试连接功能
|
||||
|
||||
#### 2.1 确保MCP服务器运行
|
||||
```bash
|
||||
# 在新终端运行HTTP服务器
|
||||
cd /Users/gavin/xhs/mcp_client/xhsLoginMCP
|
||||
node server.js
|
||||
|
||||
# 应该看到: HTTP MCP 服务器运行在 http://0.0.0.0:3100
|
||||
```
|
||||
|
||||
#### 2.2 添加新服务器
|
||||
1. 点击"添加服务器"按钮
|
||||
2. 填写配置:
|
||||
- **名称**: Test HTTP Server
|
||||
- **URL**: http://localhost:3100/mcp
|
||||
- **传输类型**: HTTP
|
||||
3. 点击"确定"
|
||||
4. **预期**: 服务器添加成功，状态为 "disconnected"（灰色点）
|
||||
5. **检查控制台**: 应该看到 `🎯 服务器添加成功，状态: disconnected`
|
||||
|
||||
#### 2.3 测试连接
|
||||
1. 找到刚添加的服务器卡片
|
||||
2. 点击"连接"按钮
|
||||
3. **检查控制台输出**:
|
||||
```
|
||||
🔌 开始连接服务器: server-id-xxx
|
||||
📡 正在连接 Test HTTP Server (HTTP)...
|
||||
✅ 连接成功: server-id-xxx
|
||||
```
|
||||
4. **预期行为**:
|
||||
- 服务器状态变为 "connected"（绿色点）
|
||||
- "连接"按钮变为"断开"按钮
|
||||
- 可以看到服务器提供的工具列表
|
||||
|
||||
#### 2.4 测试断开连接
|
||||
1. 点击"断开"按钮
|
||||
2. **检查控制台输出**:
|
||||
```
|
||||
🔌 断开服务器连接: server-id-xxx
|
||||
```
|
||||
3. **预期行为**:
|
||||
- 服务器状态变为 "disconnected"
|
||||
- "断开"按钮变回"连接"按钮
|
||||
|
||||
#### 2.5 测试重新连接
|
||||
1. 再次点击"连接"按钮
|
||||
2. **预期**: 应该能够成功连接（之前因为error状态无法重连）
|
||||
|
||||
## 常见问题排查
|
||||
|
||||
### Q1: 点击编辑按钮完全没有反应
|
||||
|
||||
**排查步骤**:
|
||||
1. 打开 Console，看是否有任何错误
|
||||
2. 检查是否有 `🔍 打开服务器详情` 日志
|
||||
3. 如果没有日志，检查 Vue 组件是否正确渲染
|
||||
4. 检查按钮的 `@click` 事件是否被其他元素遮挡
|
||||
|
||||
**可能原因**:
|
||||
- JavaScript 错误导致事件处理器失效
|
||||
- 按钮 DOM 事件被父元素阻止
|
||||
- Vue 响应式系统问题
|
||||
|
||||
### Q2: 有日志输出但modal不显示
|
||||
|
||||
**排查步骤**:
|
||||
1. 检查 `showServerDetail.value` 是否确实设置为 `true`
|
||||
2. 在 Elements 标签中查找 `<n-modal>` 元素
|
||||
3. 检查 modal 的 CSS 是否被覆盖（z-index等）
|
||||
|
||||
**解决方案**:
|
||||
```vue
|
||||
<!-- 检查 MCPServerDetail 组件的 v-model 绑定 -->
|
||||
<MCPServerDetail
|
||||
v-model:show="showServerDetail"
|
||||
:server="editingServer"
|
||||
/>
|
||||
```
|
||||
|
||||
### Q3: 连接按钮始终不可用
|
||||
|
||||
**排查步骤**:
|
||||
1. 检查服务器的 `status` 值
|
||||
2. 查看连接按钮的条件渲染逻辑:
|
||||
```vue
|
||||
v-if="server.status !== 'connected' && server.status !== 'connecting'"
|
||||
```
|
||||
3. 如果状态是 'error'，应该已经被修复为 'disconnected'
|
||||
|
||||
**验证修复**:
|
||||
```javascript
|
||||
// 在Console中执行
|
||||
const store = useServerStore()
|
||||
console.log(store.servers.map(s => ({ id: s.id, name: s.name, status: s.status })))
|
||||
```
|
||||
|
||||
### Q4: 连接一直失败
|
||||
|
||||
**排查步骤**:
|
||||
1. 确认MCP服务器确实在运行:
|
||||
```bash
|
||||
curl -X POST http://localhost:3100/mcp \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","clientInfo":{"name":"test","version":"1.0.0"}}}'
|
||||
```
|
||||
预期响应包含 `"result"` 字段
|
||||
|
||||
2. 检查浏览器控制台的Network标签
|
||||
- 查看请求是否发送
|
||||
- 查看响应状态码和内容
|
||||
- 检查是否有CORS错误
|
||||
|
||||
3. 查看详细的连接日志:
|
||||
```
|
||||
📡 正在连接 xxx...
|
||||
❌ 连接失败: Error message
|
||||
```
|
||||
|
||||
## 验证清单
|
||||
|
||||
- [ ] 开发服务器运行在 http://localhost:5173
|
||||
- [ ] MCP服务器运行在 http://localhost:3100
|
||||
- [ ] 浏览器控制台打开并切换到 Console 标签
|
||||
- [ ] 点击"编辑"按钮能看到调试日志
|
||||
- [ ] 编辑按钮能正常打开详情对话框
|
||||
- [ ] 添加服务器后状态为 "disconnected"
|
||||
- [ ] 点击"连接"按钮能成功连接
|
||||
- [ ] 连接后能看到工具列表
|
||||
- [ ] 点击"断开"按钮能断开连接
|
||||
- [ ] 断开后能再次连接
|
||||
|
||||
## 下一步调试
|
||||
|
||||
如果以上修复仍然不能解决问题，请在控制台执行以下代码并提供输出:
|
||||
|
||||
```javascript
|
||||
// 检查Vue应用状态
|
||||
const app = document.querySelector('#app').__vueParentComponent
|
||||
console.log('Vue应用:', app)
|
||||
|
||||
// 检查服务器store状态
|
||||
const { useServerStore } = await import('/src/stores/newServer.ts')
|
||||
const store = useServerStore()
|
||||
console.log('服务器列表:', store.servers)
|
||||
console.log('连接状态:', store.servers.map(s => ({ name: s.name, status: s.status })))
|
||||
|
||||
// 检查响应式状态
|
||||
console.log('showServerDetail:', showServerDetail?.value)
|
||||
console.log('editingServer:', editingServer?.value)
|
||||
```
|
||||
Reference in New Issue
Block a user