檢查網路活動

Kayce Basques

本實作教學課程將介紹一些與檢查網頁網路活動相關的常用開發人員工具功能。

如要瀏覽功能，請參閱「網路參考資料」。

請繼續閱讀，或觀看本教學課程的影片版本：

使用「Network」面板的時機

一般來說，當您需要確認資源下載或上傳資源時，請使用「Network」(網路) 面板。Network 面板最常見的用途如下：

• 確保資源確實上傳或下載。
• 檢查個別資源的屬性，例如 HTTP 標頭、內容、大小等。

如果您想改善網頁載入效能，請不要從「Network」面板開始。許多類型的載入效能問題與網路活動無關。因此從 Lighthouse 面板開始，這個面板會提供如何改善網頁的指定建議。請參閱「提升網站速度」一文。

開啟「網路」面板

如要充分運用本教學課程，請開啟示範模式，並試用示範頁面中的功能。

1. 開啟入門示範。

   

   您可能會想將示範內容移至獨立視窗。

   

2. 按下 Control + Shift + J 鍵或 Command + Option + J 鍵 (Mac) 開啟開發人員工具。系統會開啟「主控台」面板。

   

   您可能會選擇將開發人員工具固定在視窗底部。

   

3. 接著，按一下 [Network] 分頁。「Network」面板隨即開啟。

   

目前「Network」面板是空白的。這是因為開發人員工具只會在開啟時記錄網路活動，而您開啟開發人員工具後，並未發生任何網路活動。

記錄網路活動

如要查看網頁造成的網路活動，請按照下列步驟操作：

1. 重新載入網頁。網路面板會記錄網路記錄中的所有網路活動。

   

   網路記錄的每一列都代表一個資源。根據預設，資源會依時間順序列出。頂層資源通常是主要 HTML 文件。底部資源就是最後要求的項目

   每個欄都代表資源的相關資訊。預設資料欄如下：

   • 狀態：HTTP 回應代碼。
   • Type：資源類型。
   • 發起者：導致資源要求的原因。按一下「發起者」欄中的連結，即可前往導致要求的原始碼。
   • 大小：透過網路傳輸的資源量。
   • 時間：要求所需的時間。
   注意： 「網路記錄」上方的圖表稱為「總覽」。您不會在這個教學課程中使用該語句，因此您可以視需要隱藏該課程。請參閱「隱藏總覽軌跡」一文。

2. 只要您開啟開發人員工具，系統就會在「網路記錄」中記錄網路活動。為說明這一點，請先查看「網路記錄」的底部，並記下最後一次活動。

3. 接著，請在示範中按一下「Get Data」按鈕。

4. 再次查看「網路記錄」的底部。有一個名為 getstarted.json 的新資源。點選「Get Data」按鈕會導致網頁要求此檔案。

   

顯示詳細資訊

您可以設定「網路記錄」的資料欄。您可以隱藏目前未使用的資料欄。還有許多預設隱藏的資料欄，可能對您有用。

1. 在「Network Log」表格的標題上按一下滑鼠右鍵，然後選取「Domain」。系統現在會顯示每個資源的網域。

   

提示： 將滑鼠游標懸停在「Name」欄中的資源儲存格上，即可查看資源的完整網址。

模擬較慢的網路連線

您用來建構網站的電腦網路連線速度，可能會比使用者行動裝置的網路連線速度還快。透過節流網頁，您可以更準確地瞭解網頁在行動裝置上載入所需的時間。

1. 按一下「Throttling」下拉式選單 (預設為「無節流」)。

   

2. 選取「3G」。

   

3. 長按「Reload」refresh 圖示，然後選取「Empty Cache And Hard Reload」。

   

   在使用者再次造訪時，瀏覽器通常會從快取中提供部分檔案，加快網頁載入速度。「清除快取並強制重新載入」會強制瀏覽器透過網路取得所有資源。如要查看初次造訪的使用者如何體驗網頁載入情形，這項功能就很實用。

   注意： 「清空快取並強制重新載入」工作流程僅適用於開發人員工具開啟時。

擷取螢幕截圖

螢幕截圖會擷取網頁在載入期間的不同時間點的顯示外觀，並記錄每個時間間隔載入的資源。

如要擷取螢幕畫面，請按照下列步驟操作：

1. 按一下「聯播網設定」設定。

2. 勾選「螢幕截圖」check_box。

3. 使用「清除快取並強制重新載入」工作流程，再次重新載入網頁。如需提醒如何執行這項操作，請參閱「模擬較慢的連線速度」。「螢幕截圖」分頁會提供縮圖，顯示網頁在載入過程中各個階段的樣貌。

   

4. 點選第一個縮圖。開發人員工具會顯示當時發生的網路活動。

   

5. 切換「螢幕截圖」核取方塊，關閉「螢幕截圖」分頁。

6. 重新載入網頁。

檢查資源的詳細資料

按一下資源即可瞭解詳情。立即試用：

1. 按一下 getstarted.html，畫面上會顯示「Headers」分頁。使用這個分頁檢查 HTTP 標頭。

   

2. 按一下「預覽」分頁標籤，查看基本 HTML 算繪結果。

   

   如果 API 以 HTML 傳回錯誤代碼，且轉譯後的 HTML 比 HTML 原始碼更容易閱讀，或是在檢查圖片時，這個分頁就很實用。

3. 按一下「Response」分頁標籤，即可查看 HTML 原始碼。

   

   提示： 檔案經過精簡後，只要點選「Response」分頁底部的「Format」data_object 按鈕，即可重新格式化檔案內容，方便閱讀。

4. 按一下「Initiator」分頁標籤，查看對應要求啟動器鏈的樹狀結構。

   

5. 按一下「Timing」分頁標籤，查看這項資源的網路活動細目。

   

6. 按一下「Close」，即可再次查看網路記錄。

   

搜尋聯播網標頭和回應

如要搜尋所有資源的 HTTP 標頭和回應，以便找出特定字串或規則運算式，請使用「Search」分頁。

舉例來說，假設您要檢查資源是否使用合理的快取政策。

1. 按一下「搜尋」「搜尋」。系統會在「網路記錄」的左側開啟「搜尋」分頁。

   

2. 輸入 Cache-Control，然後按下 Enter 鍵。「Search」分頁會列出在資源標頭或內容中找到的所有 Cache-Control 執行個體。

   

3. 按一下所需的結果即可查看。如果系統在標頭中找到查詢，則會開啟「標頭」分頁。如果系統在內容中發現查詢，「Response」分頁隨即開啟。

   

4. 關閉「搜尋」分頁和「標頭」分頁。

   

篩選資源

DevTools 提供多種工作流程，可篩除與目前工作無關的資源。

「篩選器」工具列應該預設為啟用。否則：

1. 按一下「篩選器」filter_alt 即可顯示。

依字串、規則運算式或屬性篩選

「Filter」輸入框支援多種篩選類型。

1. 在「Filter」輸入框中輸入 png，系統只會顯示含有 png 文字的檔案。在這種情況下，只有符合篩選條件的檔案是 PNG 圖片。

   

2. 輸入 /.*\.[cj]s+$/。開發人員工具會篩除檔案名稱結尾不是 j 或 c 的資源，後面接著 1 個或多個 s 字元。

   

3. 輸入 -main.css。開發人員工具會篩除 main.css。如果任何其他檔案符合模式，也會遭到篩除。

   

4. 在「Filter」文字方塊中輸入 domain:raw.githubusercontent.com。開發人員工具會篩除網址與這個網域相符的所有資源。

   

   如需可篩選屬性的完整清單，請參閱「依屬性篩選要求」。

5. 清除「Filter」輸入框中的所有文字。

依資源類型篩選

如要專注於特定類型的檔案 (例如樣式表)，請按照下列步驟操作：

1. 按一下「CSS」。所有其他檔案類型都會遭到篩除。

   

2. 如要查看指令碼，請按住 Control 或 Command 鍵 (Mac)，然後點選「JS」JS。

   

3. 按一下「全部」即可移除篩選條件，並再次查看所有資源。

如要瞭解其他篩選工作流程，請參閱「篩選要求」。

封鎖要求

網頁的部分資源無法存取時，系統會如何呈現網頁以及運作情形？裝置是否完全故障，還是仍可正常運作？封鎖要求來找出以下資訊：

1. 按下 Control + Shift + P 鍵或 Command + Shift + P 鍵 (Mac)，開啟指令選單。

   

2. 輸入 block，選取「Show Request Blocking」，然後按下 Enter 鍵。

   

3. 按一下「Add Pattern」按鈕。

4. 輸入 main.css。

   

5. 按一下 [新增]。

6. 重新載入頁面。頁面的主要樣式工作表遭到封鎖，因此頁面樣式會有些許混亂。請注意網路記錄中的 main.css 列。紅色文字表示資源遭到封鎖。

   

7. 取消勾選「Enable request blocking」(啟用要求封鎖功能) 核取方塊。

如要探索更多與檢查網路活動相關的開發人員工具功能，請參閱網路參考資料。