You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
# 调试指南
## 消息发送问题调试
如果消息发送后无法显示，请按以下步骤调试：
### 1. 打开浏览器开发者工具
按 `F12` 或右键点击页面选择"检查"
### 2. 查看Console标签
发送消息时，应该看到以下日志：
```
displayMessage 被调用: {sender: "Alice", receiver: "Bob", content: "你好", timestamp: 1234567890} isSent: true
聊天对象: Bob 当前聊天: Bob
聊天记录已保存: 1 条消息
显示消息到DOM
displayMessageInDOM 被调用: {content: "你好", timestamp: 1234567890, isSent: true}
发送者名字: Alice
消息已添加到DOM
```
### 3. 检查可能的问题
#### 问题1：
```
消息不属于当前聊天对象，不显示
```
** 解决方案：**
- 确保已经点击选择了聊天对象
- 检查用户列表是否正常显示
#### 问题2：
- 看到"显示消息到DOM"日志
- 但没有看到"消息已添加到DOM"日志
** 解决方案：**
- 检查HTML结构是否正确
- 查看Elements标签，
#### 问题3：
```
```
** 解决方案：**
- 检查服务器是否运行
- 查看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：
```
```
#### 方案2：
```
```
#### 方案3：
```
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. 提供浏览器和系统信息
访问：
