gavin/map-client-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity
Files
3a27c7febf839b8e1e92dfa18454dbf6be48a419
map-client-vue/web/debug-ui.md
douboer d93bc02772 first commit
2025-10-14 14:18:20 +08:00

6.0 KiB
Raw Blame History

调试指南

已实施的修复

修复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服务器运行

# 在新终端运行HTTP服务器
cd /Users/gavin/xhs/mcp_client/xhsLoginMCP
node server.js

# 应该看到: HTTP MCP 服务器运行在 http://0.0.0.0:3100

2.2 添加新服务器

  1. 点击"添加服务器"按钮
  2. 填写配置:
  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等）

解决方案:

<!-- 检查 MCPServerDetail 组件的 v-model 绑定 -->
<MCPServerDetail
  v-model:show="showServerDetail"
  :server="editingServer"
/>

Q3: 连接按钮始终不可用

排查步骤:

  1. 检查服务器的 status 值
  2. 查看连接按钮的条件渲染逻辑: 
    v-if="server.status !== 'connected' && server.status !== 'connecting'"
  3. 如果状态是 'error'，应该已经被修复为 'disconnected'

验证修复:

// 在Console中执行
const store = useServerStore()
console.log(store.servers.map(s => ({ id: s.id, name: s.name, status: s.status })))

Q4: 连接一直失败

排查步骤:

  1. 确认MCP服务器确实在运行:

    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"
  • 点击"连接"按钮能成功连接
  • 连接后能看到工具列表
  • 点击"断开"按钮能断开连接
  • 断开后能再次连接

下一步调试

如果以上修复仍然不能解决问题，请在控制台执行以下代码并提供输出:

// 检查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)