接口交互与网络排查

如果页面没有报错，但是数据加载不出来，或者提交表单失败，这通常是网络通信的问题。

1. Network (网络) 面板

这是排查前后端交互的核心工具。

1. 打开开发者工具 (F12)，切换到 Network 标签。
2. 重要：再次刷新页面或点击按钮触发操作。Network 面板只记录打开工具之后发生的请求。
3. 可以在 "Filter" 栏输入接口名的关键字（如 project 或 login）来筛选请求。

2. 分析请求状态 (Status)

看请求列表前面的颜色和状态码：

• 🟢 200 OK: 成功。如果数据还不对，查看 "Response"。
• 🟡 304 Not Modified: 缓存。从本地缓存读取，没问题。
• 🔴 400 Bad Request: 前端参数错了。后端不认你发的数据。
• 🔴 401 Unauthorized: 未登录或 Token 过期。请重新登录。
• 🔴 403 Forbidden: 没权限。你登录了，但这个操作不让你做。
• 🔴 404 Not Found: 地址错了。检查 API 路径是否拼写正确，或者 ID 是否存在。
• 🔴 500 Internal Server Error: 后端炸了。这通常是后端代码抛出了异常。需要去查后端日志。
• 🔴 (failed) / CORS Error: 网络不通，或者后端服务压根没起来。

3. 深入查看请求详情

点击某个具体的请求，右侧会显示详情面板：

Headers (标头)

• Request URL: 确认请求地址对不对。
• Request Method: 是 GET 还是 POST？
• Authorization: 检查有没有带上 Bearer eyJhbG... Token。

Payload / Body (载荷)

这是前端发给后端的。

• 检查你发出的 JSON 数据格式对不对。
• 字段名有没有拼错（比如 userName 写成了 username）。

Preview / Response (响应)

这是后端回给前端的。

• 如果是 500 错误，这里通常会包含具体的错误堆栈信息（在开发环境下）。
• 确认后端返回的数据结构。是 { data: [] } 还是直接就是 []？前端代码解析匹配吗？

4. WebSocket 调试

智码方舟 使用 WebSocket 实时推送任务日志。

• 在 Network 面板的 Filter 中选择 WS。
• 找到名为 socket.io 的请求。
• 点击它，进入 Messages 标签。
• ⬆ (绿色)：你发送的指令（如 ping）。
• ⬇ (白色)：服务器推送的消息（如 task_progress）。
• 如果一直没有消息，或者连接断开，说明 WebSocket 服务异常，请检查后端日志。