第 4 课：浏览器的透视镜：Network 面板

本课目标：

• 在浏览器中打开开发者工具。
• 切换到 Network 面板。
• 读懂请求列表，识别单条请求。

上一篇 << 3 | 下一篇 5 >>

每个浏览器都为每个页面内置了一台飞行记录仪

你不需要任何额外软件就能看到 HTTP 请求。每个主流浏览器都内置了一套叫开发者工具（或 DevTools）的工具。其中的 Network 面板会把工具打开期间浏览器发出的每一条请求都记录下来¹²。

讲解

如何打开 DevTools

具体快捷键取决于浏览器和操作系统：

• Windows 上的 Chrome / Edge / Firefox：按 Ctrl + Shift + I 或 F12。
• macOS 上的 Chrome / Edge / Firefox：按 Cmd + Option + I。
• Safari：先在「偏好设置」里启用「开发」菜单，再按 Cmd + Option + I。

DevTools 打开后，点击 Network 标签页。

请求列表

Network 面板显示一张表。每一行是一条请求。默认列包括：

• Name：被请求资源的文件名。
• Status：HTTP 状态码。
• Type：资源类型，例如 document、stylesheet 或 image。
• Size：传输了多少数据。
• Time：这条请求花了多长时间²。

最上面的一行通常是主 HTML 文档。

查看单条请求

点击一行会打开详情视图。Headers 标签页显示请求行、请求头和响应头。Response 标签页显示服务器发回的响应体¹。

完整示例（跟着做）

1. 打开 Chrome、Edge、Firefox 或 Safari。
2. 按 Cmd + Option + I（macOS）或 Ctrl + Shift + I（Windows/Linux）。
3. 点击 Network 标签页。
4. 在地址栏输入 https://example.com 并按下回车。
5. 你会看到一行，名字是 example.com 或 index.html。它的 Type 多半是 document，Status 是 200。

点击那一行。Headers 标签页会显示：

Request Method: GETStatus Code: 200 OK

你来试试（填空示例）

重新加载一个页面后查看 Network 面板。找到 Type 为 document 的那一行。这一行的 Status 值是多少？

答案：通常是 200。

小结 + 下一步

Network 面板是你观察 HTTP 对话的窗口。每一行是一条请求，点击一行就能看到请求头和响应头。下一课，你将读完一次页面加载的完整故事。