第 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。
• Initiator：是什么引起了这条请求——解析 HTML 的解析器、另一段脚本，还是一次重定向。
• Size：传输了多少数据。
• Time：这条请求花了多长时间²。

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

这里面有两列值得多看一眼。Initiator 是你回答「这东西到底为什么会被请求」的入口——它会指回触发它的那行 HTML 或 JavaScript²。Size 是传输量而不是文件大小：当浏览器用自己的缓存作答时，它报的是类似「(disk cache)」这样的字样而不是字节数，因为这一趟根本没上网³。

查看单条请求

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

有个习惯值得早点养成：这个面板只在自己打开着的时候才记录¹。如果你是页面加载完之后才打开 DevTools，列表就是空的，重新加载一次即可。对那些会跳走的流程——比如一次会重定向的登录——请打开 Preserve log，让跳转之前的请求留在列表里而不是被清空¹。

完整示例（跟着做）

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 对话的窗口。每一行是一条请求，点击一行就能看到请求头和响应头。下一课，你将读完一次页面加载的完整故事。