本程式碼研究室會逐步引導您解讀複雜範例應用程式的所有網路流量。完成練習後，您將掌握所需技能，瞭解自己的網站應用程式正在載入的內容，以及何時會提出各項要求。
前往「網路」面板
前往「Network」面板，查看示範應用程式的網路流量。
如要預覽網站，請按下「View App」。然後按下「Fullscreen」圖示
。按下 `Control + Shift + J` 鍵 (在 Mac 上為 `Command + Option + J` 鍵) 開啟開發人員工具。
按一下 [網路] 分頁標籤。
重新載入網頁即可查看網路流量。
「Network」面板會顯示初始導覽時載入的所有素材資源：
如何解讀項目
每列記錄的網路流量代表一組請求和回應。
第一列的類型為 document，是網路應用程式 HTML 的初始導覽要求。這是資料流的來源；後續每個額外素材資源 (稱為主文件的子資源) 要求都會從這個原始來源流入。
第二和第三列顯示 CSS stylesheet 和 script 子資源正在載入，這些是主要文件啟動的依附要求。
從這些要求的「何時」開始執行來看，瀑布圖顯示這些要求是在回應導覽要求的過程中很晚才開始執行。
總而言之，在初始導覽期間，您需要 HTML 文件、CSS 和 JavaScript 的請求，才能顯示完整頁面。
建立其他執行階段要求
Network 面板仍處於開啟和記錄狀態，現在是時候模擬許多網路應用程式常見的情況：在初始導覽完成後，使用額外的 API 要求將更多資料新增至網頁。
如要觸發這些額外要求，請在應用程式中按一下「Find Me」，然後在隨即顯示的彈出式視窗中按一下「Allow」。這樣一來，網站就能存取你目前的位置資訊：
當網站應用程式取得可用的地點後，點選「Find Nearby Wikipedia Entries」會產生幾個額外的網路要求。畫面應如下所示：
解讀新項目
和先前一樣，每列記錄的網路流量代表一組要求和回應。
新項目的第一列代表類型為 fetch 的要求，這與網頁應用程式向 Wikipedia API 要求資料的方式相對應。
以下列為例，列出與維基百科項目相關的圖片 (png 或 jpeg)。雖然從螢幕截圖中不易看出，但「階梯圖」欄中的項目會直接從 API 回應流入。
對於所有這些額外要求，「何時」會根據您在點選「尋找附近的 Wikipedia 項目」之前，已開啟網頁的時間長度而有所不同。最重要的是，when 與初始導覽要求中斷連線。您可以從瀑布圖顯示畫面中出現的大量空白區間判斷，這代表在初始載入作業與 Wikipedia API 要求之間，有一段時間未執行任何作業。
在瀏覽後經過一段時間後提出的要求，屬於「執行階段要求」類別，而非首次瀏覽網頁時用於顯示網頁的初始要求集合。
總結
完成本程式碼研究室中的步驟後，您現在已熟悉可用來分析「任何」網頁應用程式載入內容的工具。
您可以透過「網路」面板，透過「名稱」欄中的網址和「類型」欄中的資料，瞭解「載入了什麼」，以及透過瀑布圖表瞭解「何時」載入。
您也知道，網頁發出的請求通常可歸類為以下兩種：
- 在前往新網頁後立即提出的初始要求，用於取得 HTML、JavaScript、CSS (以及其他素材資源)。
- 使用者與網頁互動後所提出的執行階段要求。這通常會從對 API 提出要求開始，然後根據擷取的 API 資料，流入多個後續要求。