前端调试指南：使用浏览器开发者工具分析网络请求

显示请求体内容，即前端传递给后端的参数。

• POST/PUT 请求：通常为 JSON 格式。

{ "username": "example", "password": "secret" }

• GET 请求：参数通常作为 URL 查询字符串的一部分。

/api/users?name=John&age=30

Response

显示后端返回的数据，通常为 JSON 格式。

{ "id": 1, "name": "John Doe", "email": "[email protected]" }

与之对应的前端展示如下：

Preview

以更友好的格式展示返回数据，便于阅读。对于复杂的嵌套结构，Preview 会自动格式化并提供折叠功能。

Timing

展示请求各个阶段的时间消耗，帮助优化性能。具体分为：

• Queueing：排队等待时间。
• Stalled：阻塞时间。
• DNS Lookup：域名解析时间。
• Initial Connection：TCP 连接建立时间。
• SSL：SSL/TLS 握手时间。
• Request Sent：发送请求时间。
• Waiting (TTFB)：等待首字节响应时间。
• Content Download：下载响应内容时间。

4. 实际操作步骤

假设你有一个前端页面调用了后端 API 来获取用户信息，可以按以下步骤操作：

1. 打开浏览器开发者工具（F12），切换到 Network 标签页。
2. 刷新页面或触发相关操作（如点击按钮），确保 API 请求被发送。
3. 在 Network 列表中找到对应的 API 请求（例如 /api/user）。
4. 点击该请求行，查看详细的请求和响应信息，包括请求方法、请求参数（Payload）以及返回结果（Response）。

5. 常见问题及解决方法

无法看到 API 请求

原因可能是触发请求前未打开开发者工具，或者过滤器设置不当。 解决方法：确保在触发请求之前已打开开发者工具，并通过输入框顶部的过滤器调整，避免过滤掉 API 请求。

请求失败

原因可能是客户端请求有误或服务器端出现问题。 解决方法：检查 Status 列是否显示了非 2xx 的状态码，查看 Response 中是否有错误信息。常见的错误包括：

• 400 Bad Request：检查请求参数是否正确。
• 401 Unauthorized：确认身份验证信息是否有效。
• 500 Internal Server Error：查看服务器日志以排查问题。

跨域问题（CORS）

原因：浏览器出于安全考虑，默认不允许跨域请求。 解决方法：检查后端是否正确配置了 CORS 策略。确保响应头中包含以下字段：

• Access-Control-Allow-Origin：允许的源地址。
• Access-Control-Allow-Methods：允许的 HTTP 方法。
• Access-Control-Allow-Headers：允许的请求头。