# 调试指南

## 消息发送问题调试

如果消息发送后无法显示，请按以下步骤调试：

### 1. 打开浏览器开发者工具

按 `F12` 或右键点击页面选择"检查"

### 2. 查看Console标签

发送消息时，应该看到以下日志：

```
发送消息: 你好 给: Bob
displayMessage 被调用: {sender: "Alice", receiver: "Bob", content: "你好", timestamp: 1234567890} isSent: true
聊天对象: Bob 当前聊天: Bob
聊天记录已保存: 1 条消息
显示消息到DOM
displayMessageInDOM 被调用: {content: "你好", timestamp: 1234567890, isSent: true}
发送者名字: Alice
消息已添加到DOM
```

### 3. 检查可能的问题

#### 问题1：currentChat 为 null
**症状：**
```
聊天对象: Bob 当前聊天: null
消息不属于当前聊天对象，不显示
```

**解决方案：**
- 确保已经点击选择了聊天对象
- 检查用户列表是否正常显示

#### 问题2：消息未添加到DOM
**症状：**
- 看到"显示消息到DOM"日志
- 但没有看到"消息已添加到DOM"日志

**解决方案：**
- 检查HTML结构是否正确
- 查看Elements标签，确认messages元素存在

#### 问题3：WebSocket连接断开
**症状：**
```
连接已断开，请重新登录
```

**解决方案：**
- 检查服务器是否运行
- 查看Network标签的WebSocket连接状态
- 重新登录

### 4. 检查HTML元素

在Elements标签中查找：

```html
<div class="messages" id="messages">
    <div class="message sent">
        <div class="message-wrapper">
            <div class="message-sender">Alice</div>
            <div class="message-content">
                <div class="message-text">你好</div>
                <div class="message-info">10:30</div>
            </div>
        </div>
    </div>
</div>
```

### 5. 检查CSS样式

确认以下CSS类存在：
- `.message`
- `.message-wrapper`
- `.message-sender`
- `.message-content`
- `.message-text`
- `.message-info`

### 6. 检查JavaScript错误

在Console标签中查看是否有红色错误信息：

常见错误：
- `Cannot read property 'appendChild' of null` - messages元素不存在
- `escapeHtml is not defined` - 函数未定义
- `username is not defined` - 变量未初始化

### 7. 完整测试流程

1. **清除缓存**
   - 按 `Ctrl+Shift+Delete`
   - 清除缓存和Cookie
   - 刷新页面

2. **重新登录**
   - 输入用户名
   - 点击登录
   - 查看Console日志

3. **选择用户**
   - 等待其他用户上线
   - 点击用户列表中的用户
   - 查看Console日志

4. **发送消息**
   - 输入消息内容
   - 按回车或点击发送
   - 查看Console日志
   - 检查消息是否显示

### 8. 网络调试

在Network标签中：

1. **检查WebSocket连接**
   - 找到WS类型的连接
   - 状态应该是101 Switching Protocols
   - 查看Messages子标签

2. **查看消息内容**
   - 发送的消息（绿色箭头）
   - 接收的消息（红色箭头）

### 9. 常见解决方案

#### 方案1：刷新页面
```
按 F5 或 Ctrl+R
```

#### 方案2：硬刷新
```
按 Ctrl+Shift+R 或 Ctrl+F5
```

#### 方案3：清除缓存后刷新
```
1. 打开开发者工具
2. 右键点击刷新按钮
3. 选择"清空缓存并硬性重新加载"
```

#### 方案4：重新编译服务器
```bash
# Linux
./compile_web.sh
./quick_start.sh

# Windows
compile_web.bat
quick_start.bat
```

### 10. 收集调试信息

如果问题仍然存在，请收集以下信息：

1. **浏览器信息**
   - 浏览器名称和版本
   - 操作系统

2. **Console日志**
   - 完整的Console输出
   - 包括所有日志和错误

3. **Network信息**
   - WebSocket连接状态
   - 发送和接收的消息

4. **重现步骤**
   - 详细的操作步骤
   - 预期结果和实际结果

### 11. 临时解决方案

如果需要快速测试，可以使用命令行客户端：

```bash
# 启动TCP服务器
./run_server.sh

# 启动命令行客户端
./run_client.sh
```

### 12. 移除调试日志

测试完成后，如果想移除调试日志，可以：

1. 搜索 `console.log`
2. 删除或注释掉这些行
3. 重新编译

或者保留日志，在生产环境中可以通过浏览器设置过滤。

---

## 快速检查清单

- [ ] 服务器是否运行？
- [ ] 浏览器开发者工具是否打开？
- [ ] Console中是否有错误？
- [ ] 是否已选择聊天对象？
- [ ] WebSocket连接是否正常？
- [ ] 消息是否发送到服务器？
- [ ] 是否收到服务器响应？
- [ ] HTML元素是否正确创建？
- [ ] CSS样式是否正确加载？
- [ ] 是否尝试过刷新页面？

---

## 联系支持

如果以上方法都无法解决问题，请：

1. 截图Console日志
2. 截图Network标签
3. 描述详细的重现步骤
4. 提供浏览器和系统信息

访问：http://120.46.87.202:8080 进行在线测试