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

Jeff Posnick

如要遵循本程式碼研究室，請在第二個分頁中開啟此 Glitch。

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

本程式碼研究室將引導您逐步瞭解所有網路 較複雜的範例應用程式的流量運動結束後 您將具備必要技能，瞭解自家網頁應用程式為何 以及發出各個請求的時間。

注意： 本程式碼研究室提供的螢幕截圖和操作說明，假設您使用的是 Chrome。每個瀏覽器都有專屬的開發人員工具體驗，可能與本程式碼研究室顯示的內容不同。

前往「網路」面板

前往「網路」面板，查看示範的網路流量 應用程式。

1. 如要預覽網站，請按下「查看應用程式」。然後按下 全螢幕 。

2. 按下 Control+Shift+J 鍵 (或在 Mac 上為 Command+Option+J 鍵) 開啟開發人員工具。

3. 按一下 [網路] 分頁標籤。

4. 重新載入網頁即可查看網路流量。

「網路」面板會顯示因為初始設定而載入的所有資產 導覽：

注意： 「聯播網」面板中實際顯示的資料欄可能會有所不同。螢幕截圖顯示簡化版檢視畫面，其中未隱藏「Name」、「Type」和「Waterfall」欄。

如何解讀這些項目

每列記錄的網路流量都代表一個要求和回應 配對。

document 類型的初始導覽要求是 網頁應用程式的 HTML 中。這是刊登序列的來源；隨後出現的 額外資產 (稱為主要文件的子資源) 流程的要求 產生說明文字

第二和第三列顯示 CSS stylesheet 和 script 子資源 載入的內容，是指由主要文件啟動的相依要求。

查看發出請求的時間時，瀑布圖會顯示 他們在回應 導航要求。

系統會將 HTML 文件、CSS 和 需有 JavaScript 初始導覽。

建立一些其他執行階段要求

在「網路」面板保持開啟並進行錄製時，現在可以模擬某些結果 是許多網路應用程式常見的 API 要求，也就是用來將更多資料加入 以便瞭解系統

如要觸發這些額外的要求，請在應用程式中點選「Find Me」，然後 在隨即出現的彈出式視窗中，選取「允許」。 這會允許網站存取您目前的位置：

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

網頁應用程式準備好某個位置後，按一下「尋找附近地點」 維基百科項目會產生多個網路要求。個人中心 看起來應該會像這樣：

解讀新項目

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

新項目的第一列代表類型為 fetch 的要求。 對應於 網頁應用程式要求資料的方式 讀取及寫入資料

以下各列皆為與pngjpeg Wikipedia 項目。雖然從螢幕截圖中很難看出 「刊登序列」欄中的項目直接從 API 回應流動。

針對所有其他要求，何時的準備則取決於 瀏覽過網頁，之後點選 [尋找附近的維基百科] 項目。最重要的是，當 與 初始導覽要求我們可以從 「刊登序列」會顯示一段時間， 初次載入以及發出 Wikipedia API 要求時。

在瀏覽過了一段時間之後發出的要求可歸入該類別 「執行階段要求」而不是用來顯示 。

正在總結

完成本程式碼研究室中的步驟後，您現在可以熟悉 工具，可用來分析「任何」網頁應用程式載入的項目。

「網路」面板可協助您回答目前載入的「內容」問題； 「名稱」欄中的網址和「類型」欄中的資料，以及 when 載入的是刊登序列畫面

您也發現網頁發出的要求 (通常) 會歸入同一組 以下其中一種類別：

1. 初始要求，在瀏覽至新頁面後立即發出， HTML、JavaScript、CSS (以及其他素材資源)。
2. 因使用者與網頁互動而提出的執行階段要求。這個 通常一開始都是先向 API 發出要求，再接著流入數個 以擷取的 API 資料為依據進行後續追蹤要求。