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

Jeff Posnick

如要按照本程式碼研究室的說明操作，請在第二個分頁中開啟這個 Glitch。

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

本程式碼研究室會逐步引導您解譯較複雜的範例應用程式的所有網路流量。運動結束後，您將具備瞭解自己的網頁應用程式正在載入的「內容」，以及應用程式發出每項要求的「時機」。

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

前往「網路」面板

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

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

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

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

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

「Network」(網路) 面板會顯示由於您初次瀏覽而載入的所有資產：

注意： 「網路」面板顯示的實際資料欄可能有所不同；這張螢幕截圖顯示簡化後的檢視畫面，其中隱藏了「Name」、「Type」和「Waterfall」欄以外的所有項目。

如何解讀項目

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

第一列 (類型：document) 是網頁應用程式 HTML 的初始導覽要求。這是刊登序列的來源；後續每次要求來自此原始來源的額外資產 (稱為主要文件的子資源) 流程。

第二和第三列 (顯示正在載入的 CSS stylesheet 和 script 子資源) 是相依於主要文件發出的要求。

查看這些要求所發出的「時間」，刊登序列圖會顯示，直到回應導覽要求的過程非常遲時，才會啟動。

總而言之，在初始瀏覽期間，需要對 HTML 文件、CSS 和 JavaScript 提出的要求完整顯示完整頁面。

建立一些額外的執行階段要求

隨著「Network」面板仍處於開啟並記錄狀態，您可以模擬很多網頁應用程式常見的功能：初始導覽作業完成後，系統會使用額外的 API 要求在頁面中加入更多資料。

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

注意： 您也可以拒絕授予地理位置存取權，在此情況下，網頁應用程式會改回預設位置。

當網頁應用程式有可以處理的位置後，按一下「Find Nearby Wikipedia Entries」將會產生額外的網路要求。畫面應如下所示：

解讀新項目

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

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

以下所有資料列都是與 Wikipedia 項目相關聯的圖片 (png 或 jpeg)。雖然從螢幕截圖看來有點困難，但其在「Waterfall」欄中的項目會直接從 API 回應流出。

在這些額外要求中，點選「Find Nearby WikipediaEntries」前要開啟頁面的時間長度會有所差異，這裡最重要的是，when 與初始導覽要求中斷連線。您可以從刊登序列螢幕上的較大差距得知這一點，也就是從初始載入到提出 Wikipedia API 要求之間經過的時間。

在導覽的間隔時間過後，要求屬於「執行階段要求」類別，而不是「執行階段要求」這個類別，而不是初次前往該網頁時用來顯示網頁的初始要求組合。

總結內容

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

透過「Network」面板，您可以透過刊登序列螢幕，透過「名稱」欄中的網址、「類型」欄中的資料和「類型」欄的資料以及載入「時機」，回答正在載入的內容。

此外，您也發現網頁提出的要求 (通常) 會分成以下兩類：

1. 初始要求，在導覽至新頁面後立即發出，適用於 HTML、JavaScript、CSS (以及其他素材資源) 的要求。
2. 因使用者與網頁互動而發出的執行階段要求。這通常通常是先向 API 發出要求，再根據擷取的 API 資料傳送至數個後續要求。