前端开发：如何使用浏览器开发者工具查看接口请求与响应

b. Payload

显示请求体的内容，即前端传递给后端的参数。对于不同类型的请求，Payload 内容有所不同：

• POST/PUT 请求：通常为 JSON 格式的数据，例如：

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

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

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

c. Response

下面是与之相对应的前端展示：

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

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

d. Preview

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

e. 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. 点击该请求行，查看详细的请求和响应信息，包括：
   • 请求方法（GET/POST 等）
   • 请求参数（Payload）
   • 返回结果（Response）

5. 常见问题及解决方法

a. 无法看到 API 请求

• 原因：可能你在触发请求之前没有打开开发者工具，或者过滤器设置不当。
• 解决方法：确保在触发请求之前已经打开了开发者工具，并且没有过滤掉 API 请求（可以通过输入框顶部的过滤器调整）。

b. 请求失败

• 原因：可能是客户端请求有误或服务器端出现问题。
• 解决方法：检查 Status 列是否显示了非 2xx 的状态码，查看 Response 中是否有错误信息。常见的错误包括：
  • 400 Bad Request：检查请求参数是否正确。
  • 401 Unauthorized：确认身份验证信息是否有效。
  • 500 Internal Server Error：查看服务器日志以排查问题。

c. 跨域问题（CORS）

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