探索開發人員工具「Network」面板

Jeff Posnick

注意： 本程式碼實驗室使用 Chrome 開發人員工具。如果尚未安裝 Chrome，請下載。

本程式碼實驗室會逐步引導您解讀複雜範例應用程式的所有網路流量。完成練習後，您將具備所需技能，能找出自己的網頁應用程式載入哪些內容，以及何時發出各項要求。

注意： 本程式碼實驗室的螢幕截圖和操作說明，皆假設您使用 Chrome。每個瀏覽器都有專屬的開發人員工具體驗，可能與您在本程式碼實驗室中看到的內容不符。

前往「Network」(網路) 面板

前往「Network」(網路) 面板，查看試用應用程式的網路流量。

1. 按下 `Control+Shift+J` (在 Mac 上為 `Command+Option+J`) 開啟開發人員工具。
2. 按一下 [網路] 分頁標籤。
3. 重新載入頁面，即可查看網路流量。

「網路」面板會顯示因初始導覽而載入的所有素材資源：

注意： 「網路」面板中實際顯示的資料欄可能不同；螢幕截圖顯示的是簡化檢視畫面，除了「名稱」、「類型」和「瀑布」欄外，其他欄都已隱藏。

如何解讀項目

記錄的網路流量中，每一列都代表一組要求和回應。

第一列的類型為 document，是網頁應用程式 HTML 的初始導覽要求。這是刊登序列的來源；後續每個額外素材資源 (稱為主要文件的子資源) 的請求，都會從這個原始來源流出。

第二和第三列顯示載入的 CSS stylesheet 和 script 子資源，這些是由主文件發出的依附要求。

查看提出這些要求的時間，瀑布圖顯示，這些要求直到導覽要求的回應程序快結束時才開始。

綜合來看，在初始導覽期間，需要 HTML 文件、CSS 和 JavaScript 的要求，才能顯示完整網頁。

建立其他執行階段要求

在「Network」面板仍開啟並記錄的情況下，現在可以模擬許多網頁應用程式常見的情況：在初始導覽完成後，使用額外的 API 要求將更多資料新增至頁面。

如要觸發這些額外要求，請在應用程式中按一下「Find Me」，然後在顯示的彈出式視窗中按一下「Allow」。這樣一來，網站就能存取你目前的位置資訊：

注意： 您也可以拒絕授予地理位置權限，這樣網頁應用程式就會改用預設位置。

網頁應用程式取得位置資訊後，點選「Find Nearby Wikipedia Entries」會產生幾項額外的網路要求。您應該會看到類似下方的內容：

解讀新項目

和先前一樣，記錄的網路流量中，每一列都代表一組要求和回應。

新項目的第一列代表類型為 fetch 的要求，對應至網頁應用程式向 Wikipedia API 要求資料的方式。

以下各列都是與維基百科項目相關聯的圖片 (png 或 jpeg)。雖然從螢幕截圖中可能不太容易看出來，但「Waterfall」欄中的項目是直接從 API 回應中取得。

對於所有這些額外要求，when 會根據您在點選「Find Nearby Wikipedia Entries」之前開啟頁面的時間長度而有所不同。這裡最重要的是，何時與初始導覽要求中斷連線。您可以從瀑布圖顯示畫面中的大間隔看出這一點，這代表初始載入和提出 Wikipedia API 要求之間經過的時間。

在瀏覽後經過一段時間才提出的要求，屬於「執行階段要求」類別，與您首次瀏覽網頁時用於顯示網頁的初始要求組合不同。

總結

完成本程式碼實驗室的步驟後，您現在已熟悉可用來分析「任何」網頁應用程式載入內容的工具。

「網路」面板可協助您回答載入內容的問題 (透過「名稱」欄中的網址和「類型」欄中的資料)，以及載入時間的問題 (透過瀑布圖顯示)。

您也瞭解到，網頁發出的要求 (通常) 可以分為以下兩類：

1. 前往新網頁後，立即對 HTML、JavaScript、CSS (以及其他可能的素材資源) 提出的初始要求。
2. 使用者與網頁互動時產生的執行階段要求。這通常會從 API 要求開始，然後根據擷取的 API 資料，流入多個後續要求。