hnu202326010206
/
cserver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
cserver/DEBUG_GUIDE.md

4.7 KiB
Raw Permalink Blame History Escape

调试指南

消息发送问题调试

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

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标签中查找：

<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：重新编译服务器

# Linux
./compile_web.sh
./quick_start.sh

# Windows
compile_web.bat
quick_start.bat

10. 收集调试信息

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

  1. 浏览器信息

    • 浏览器名称和版本
    • 操作系统

  2. Console日志

    • 完整的Console输出
    • 包括所有日志和错误

  3. Network信息

    • WebSocket连接状态
    • 发送和接收的消息

  4. 重现步骤

    • 详细的操作步骤
    • 预期结果和实际结果

11. 临时解决方案

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

# 启动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 进行在线测试