在瀏覽器中，F12 開發者工具的 “Network” 面板是用于查看網頁在加載過程中發起的所有網絡請求，包括 API 請求，以及查看這些請求的詳細信息和響應數據的。以下以常見的 Chrome 瀏覽器為例，介紹如何使用 F12 控制臺查看 Network 里的 API 及其中的數據格式：

打開 F12 開發者工具

在 Chrome 瀏覽器中，按下鍵盤上的?F12?鍵，或者右鍵點擊網頁的任意位置，在彈出的菜單中選擇 “檢查”，即可打開開發者工具面板。

切換到 Network 面板

在開發者工具面板中，點擊 “Network” 標簽，切換到 Network 面板。此時，該面板默認是空的，需要進行一些操作來觸發網絡請求。

觸發 API 請求

刷新當前網頁，或者在網頁上進行一些會觸發 API 調用的操作，比如點擊按鈕、加載更多內容等。這時，Network 面板會顯示出所有在操作過程中發起的網絡請求，包括 API 請求。

篩選出 API 請求

在 Network 面板中，你可以通過 “Type” 列來篩選出你需要查看的 API 請求。通常，API 請求的類型是 “Fetch/XHR”（Fetch 和 XMLHttpRequest 是常見的用于發起 API 請求的方式）。你也可以使用搜索框輸入關鍵詞來快速定位特定的 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}]}