详细教程：如何从前端查看调用接口、传参及返回结果（附带图片案例）

目录

1. 打开浏览器开发者工具

2. 使用 Network 面板

3. 查看具体的API请求

a. Headers​

b. Payload​

c. Response​

d. Preview

e. Timing​

4. 实际操作步骤

5. 常见问题及解决方法

a. 无法看到API请求

b. 请求失败

c. 跨域问题（CORS）

作为一名后端工程师，理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具（F12）查看和分析这些信息，并附带图片案例帮助你更好地理解。

1. 打开浏览器开发者工具

按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章，打开开发者工具进行演示。

2. 使用 Network 面板

在开发者工具中，Network 面板用于监控和分析所有网络请求。以下是 Network 面板中的几个重要选项及其含义：

Name：显示请求的资源名称或API路径。

Status：HTTP状态码，表示请求的结果：

200 OK：成功响应。

400 Bad Request：客户端请求有误。

401 Unauthorized：未授权。

403 Forbidden：禁止访问。

404 Not Found：资源未找到。

500 Internal Server Error：服务器内部错误。

Type：资源类型，例如：

xhr（XMLHttpRequest）

fetch（现代的API请求方式）

script（JavaScript文件）

css（样式表）

img（图片）

Initiator：发起请求的源头，可能是JavaScript代码、HTML标签或其他资源。

Size：请求和响应的大小，包括头部和主体。

Time：请求的耗时，从发起请求到接收到完整响应的时间。

Waterfall：以瀑布图的形式展示每个请求的时间线，帮助你了解请求的顺序和延迟情况。

3. 查看具体的API请求

当你想查看某个具体的API请求时，可以在 Network 面板中找到对应的请求行，然后点击它展开详细信息。例如我打开我的一篇文章，查看左侧的“热门文章”的API请求，以下是一些关键部分：

a. Headers

包含请求头和响应头信息，如：

Content-Type：指定请求或响应的内容类型（如application/json）。

Authorization：用于身份验证的令牌或凭据。

Cookie：存储在客户端的会话信息。

User-Agent：标识发送请求的浏览器或客户端。

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": "john@example.com"
}

d. Preview

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

e. Timing

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

Queueing：请求排队等待的时间。

Stalled：请求被阻塞的时间。

DNS Lookup：解析域名的时间。

Initial Connection：建立TCP连接的时间。

SSL：SSL/TLS握手的时间。

Request Sent：发送请求的时间。

Waiting (TTFB)：等待第一个字节响应的时间。

Content Download：下载响应内容的时间。

4. 实际操作步骤

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

打开浏览器开发者工具（F12），切换到 Network 标签页。

刷新页面或触发相关操作（如点击按钮），确保API请求被发送。

在 Network 列表中找到对应的API请求（例如/api/user）。

点击该请求行，查看详细的请求和响应信息，包括：

请求方法（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：允许的请求头。