浏览器、HTTP 与开发者工具

当页面“没有数据”“提交没反应”或“接口报错”时，不能只看服务端终端。浏览器开发者工具能直接告诉我们：请求有没有发出、参数是什么、API 返回了什么。

上一节已经准备了编辑器、项目目录和终端。本节第一次同时启动静态页面与课程测试 API，只观察浏览器请求，不学习服务端实现。

打开开发者工具

在 Chrome 或 Edge 中按 F12，重点使用两个面板：

Elements：查看和修改当前页面的 HTML、CSS。
Network：查看浏览器发出的请求和服务器返回的响应。

后面的项目中，先打开 Network，再操作页面。这样能完整看到一次请求。

完成一次 Network 观察实验

先启动课程测试 API。第一次进入该目录时先执行 uv sync，以后通常可以直接执行启动命令；完整说明见 ./.code/api_server/README.md：

bash

cd .code/api_server
uv sync
uv run uvicorn app:app --reload --port 8000

另开一个终端，在课程根目录执行：

bash

python -m http.server 5500

打开下面的 Network 观察实验，回到 Network 面板，点击“检查 API”。重点记录：

Network 观察实验源码

index.html

html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Network 观察实验</title>
  <style>
    body {
      max-width: 760px;
      margin: 40px auto;
      padding: 0 20px;
      color: #263238;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    button {
      padding: 8px 14px;
      cursor: pointer;
    }

    pre {
      overflow: auto;
      padding: 16px;
      background: #f4f6f8;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <main>
    <h1>观察一次 API 请求</h1>
    <p>打开开发者工具的 Network 面板，再点击按钮，观察请求方法、地址、状态码和响应。</p>
    <button id="check-api-button" type="button">检查 API</button>
    <p id="status" role="status" aria-live="polite">尚未发送请求</p>
    <pre id="result">响应内容会显示在这里</pre>
  </main>

  <script>
    const apiUrl = "http://127.0.0.1:8000/api/health";
    const checkButton = document.querySelector("#check-api-button");
    const status = document.querySelector("#status");
    const result = document.querySelector("#result");

    checkButton.addEventListener("click", async () => {
      checkButton.disabled = true;
      status.textContent = "请求中……";
      result.textContent = "正在等待响应";

      try {
        const response = await fetch(apiUrl);
        const data = await response.json();

        status.textContent = `请求完成：${response.status} ${response.statusText}`;
        result.textContent = JSON.stringify(
          { method: "GET", url: apiUrl, status: response.status, data },
          null,
          2,
        );
      } catch (error) {
        status.textContent = "请求失败，请查看 Console 和 Network";
        result.textContent = error.message;
      } finally {
        checkButton.disabled = false;
      }
    });
  </script>
</body>
</html>

:::

Request Method：GET
Request URL：http://127.0.0.1:8000/api/health
Status Code：200
Response：包含 status 和 message 的 JSON

这个实验只观察浏览器发出的请求，不要求阅读测试 API 的 FastAPI 实现。

一次 HTTP 请求

假设页面要查询第 2 页学员数据：

text

GET /api/students?page=2&page_size=10 HTTP/1.1
Host: 127.0.0.1:8000
Accept: application/json

这段内容可以先这样理解：

GET：请求方法，表示查询数据。
/api/students：请求的接口地址。
page=2&page_size=10：查询参数。
Accept: application/json：浏览器希望服务器返回 JSON 数据。

API 可以返回下面的响应：

json

{
  "total": 25,
  "items": [
    {"id": 11, "name": "张三", "class_name": "一班"}
  ]
}

页面拿到 JSON 后，再把其中的 items 渲染为表格。

常见状态码

状态码	含义	页面常见处理
`200`	请求成功	渲染数据或提示操作成功
`201`	创建成功	提示新增成功并刷新列表
`400`	请求参数不正确	显示后端返回的错误信息
`401`	未登录	跳转到登录页或提示重新登录
`403`	没有权限	提示当前用户没有操作权限
`404`	地址或数据不存在	检查接口地址或提示记录不存在
`422`	服务端校验未通过	提示字段格式或必填项错误
`500`	服务器错误	查看服务端日志

用 Network 排查问题

以“新增学员失败”为例：

打开 Network，点击新增按钮。
找到刚刚出现的 POST /api/students 请求。
查看 Payload，确认提交的字段和值是否正确。
查看 Response，确认 API 返回的错误信息。
查看状态码：422 通常是参数校验问题，500 通常需要回到后端终端继续排查。

注意：浏览器控制台中的跨域错误也要结合 Network 一起看。请求可能已经被浏览器拦截，服务端不一定能看到业务接口被执行。

动手实验：观察一次 API 请求

启动课程测试 API 和静态页面后，回到上面的 Network 观察实验，点击“检查 API”。

验收：

Network 中出现 GET /api/health。
状态码为 200，响应包含 status 和 message。
页面能显示请求地址、状态码和 JSON 响应。

浏览器、HTTP 与开发者工具 ​

打开开发者工具 ​

完成一次 Network 观察实验 ​

一次 HTTP 请求 ​

常见状态码 ​

用 Network 排查问题 ​