当前位置：首页 > news >正文

使用 F12 查看 Network 及数据格式

news 来源：原创 2025/6/10 2:29:16

在浏览器中，F12 开发者工具的 “Network” 面板是用于查看网页在加载过程中发起的所有网络请求，包括 API 请求，以及查看这些请求的详细信息和响应数据的。以下以常见的 Chrome 浏览器为例，介绍如何使用 F12 控制台查看 Network 里的 API 及其中的数据格式：

在 Chrome 浏览器中，按下键盘上的 F12 键，或者右键点击网页的任意位置，在弹出的菜单中选择 “检查”，即可打开开发者工具面板。

在开发者工具面板中，点击 “Network” 标签，切换到 Network 面板。此时，该面板默认是空的，需要进行一些操作来触发网络请求。

刷新当前网页，或者在网页上进行一些会触发 API 调用的操作，比如点击按钮、加载更多内容等。这时，Network 面板会显示出所有在操作过程中发起的网络请求，包括 API 请求。

在 Network 面板中，你可以通过 “Type” 列来筛选出你需要查看的 API 请求。通常，API 请求的类型是 “Fetch/XHR”（Fetch 和 XMLHttpRequest 是常见的用于发起 API 请求的方式）。你也可以使用搜索框输入关键词来快速定位特定的 API 请求。

选中一个 API 请求，在右侧会显示该请求的详细信息，包括 “Headers”（请求头）、“Preview”（预览响应数据）、“Response”（原始响应数据）等标签页：

Headers：可以查看请求的 URL、请求方法（GET、POST 等）、请求头信息（如 User-Agent、Cookie 等）以及响应头信息。
Preview：该标签页会以格式化的方式展示响应数据，方便你直观地查看数据结构。如果响应数据是 JSON 格式，会以树状结构展示；如果是文本格式，则会直接显示文本内容。
Response：这里显示的是原始的响应数据，与 “Preview” 标签页的内容相同，但未经过格式化处理，是服务器返回的原始数据形式。

如果服务器返回的数据是 JSON 格式，这是最常见的 API 数据格式，在 Preview 或 Response 标签页中会看到类似这样的内容：

{ "key1": "value1", "key2": 123, "key3": [ "item1", "item2", { "subKey1": "subValue1", "subKey2": false } ] }

Preview：以结构化的树状视图展示，方便查看对象和数组的层次结构，可展开和折叠节点，易于阅读。
Response：以原始文本形式展示，即一串没有缩进和换行的 JSON 字符串，但内容和 Preview 一致，例如：{"key1":"value1","key2":123,"key3":["item1","item2",{"subKey1":"subValue1","subKey2":false}]}