檢查網路活動

Kayce Basques
Kayce Basques
X GitHub

本教學課程將實際操作，瞭解一些最常用的開發人員工具功能，以便檢查網頁的網路活動。

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

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

使用「網路」面板的時機

一般來說，如要確保資源下載或上傳作業正常進行，請使用「網路」面板。「網路」面板最常見的用途如下：

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

如要改善網頁載入效能，請不要從「網路」面板著手。許多載入效能問題與網路活動無關。建議先從 Lighthouse 面板著手，因為這個面板會提供具體的網頁改善建議。請參閱「加快網站速度」。

開啟「網路」面板

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

  1. 開啟「Get Started Demo」(開始使用示範)。

    示範網站。

    您可能想將試用版移至獨立視窗。

    一個視窗顯示試用版，另一個視窗顯示本教學課程。

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

    開發人員工具中的「主控台」面板。

    您可能偏好將開發人員工具視窗固定在視窗底部。

    開發人員工具固定在視窗底部。

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

    開發人員工具的「網路」面板固定在視窗底部。

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

記錄網路活動

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

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

    包含 5 個要求的「網路記錄」。

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

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

    • 狀態：HTTP 回應代碼。
    • 類型：資源類型。
    • 發起者：導致要求資源的原因。按一下「發起者」欄中的連結，即可前往導致要求的原始碼。
    • 大小：透過網路傳輸的資源量。
    • 時間：要求所花費的時間。

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

  3. 現在，請按一下示範中的「取得資料」按鈕。

  4. 再次查看「網路記錄」底部。現在有新的資源，名為 getstarted.json。按一下「取得資料」按鈕後，頁面就會要求提供這個檔案。

    網路記錄中的新資源。

顯示詳細資訊

您可以設定「網路記錄」的資料欄。你可以隱藏未使用的資料欄。此外，還有許多預設隱藏的欄位可能對您有幫助。

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

    啟用「網域」欄。

模擬網路連線速度較慢的情況

您用來建構網站的電腦網路連線速度，可能比使用者行動裝置的網路連線速度快。節流網頁可協助您進一步瞭解網頁在行動裝置上的載入時間。

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

    「網路」面板中的節流下拉式選單。

  2. 選取「3G」。

    在「網路」面板中選取「3G」。

  3. 長按「重新載入」，然後選取「清除快取並強制重新載入」。

    清除快取並強制重新載入。

    再次造訪時，瀏覽器通常會從快取提供部分檔案，加快載入網頁速度。清除快取並強制重新載入會強制瀏覽器前往網路，尋找所有資源。這項資訊有助於瞭解首次訪客載入網頁時的體驗。

擷取螢幕截圖

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

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

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

  2. 啟用「螢幕截圖」 核取方塊。

  3. 使用「清除快取並強制重新載入」工作流程，再次重新載入頁面。如需操作說明，請參閱「模擬較慢的連線」。「螢幕截圖」分頁會提供縮圖，顯示網頁在載入過程中的不同時間點的樣貌。

    「網路」面板中載入網頁的螢幕截圖。

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

    第一張螢幕截圖期間發生的網路活動。

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

  6. 再次重新載入網頁。

檢查資源詳細資料

按一下資源即可瞭解詳情。馬上試試：

  1. 按一下 getstarted.html，系統會顯示「標頭」分頁。您可以使用這個分頁檢查 HTTP 標頭。

    「網路」面板中的「標頭」分頁。

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

    「網路」面板中的「預覽」分頁。

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

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

    「網路」面板中的「回應」分頁。

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

    「網路」面板中的「發起者」分頁。

  5. 按一下「時間」分頁標籤，即可查看這項資源的網路活動明細。

    「網路」面板中的「時間」分頁。

  6. 按一下「關閉」圖示 即可再次查看「網路記錄」。

    詳細資料分頁的「關閉」按鈕。

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

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

  1. 按一下面板動作列中的「搜尋」，或按下 Command + F 鍵 (macOS) 或 Control + F 鍵 (Windows / Linux)。

    「搜尋」分頁會在「網路記錄」左側開啟。

    「搜尋」分頁標籤位於「網路記錄」左側。

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

    「Cache-Control」的搜尋結果。

  3. 按一下結果即可查看。如果查詢內容出現在標頭中，系統會開啟「標頭」分頁。如果內容中找到查詢字串，系統會開啟「回應」分頁。

    「標頭」分頁中醒目顯示的搜尋結果。

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

    「關閉」按鈕。

篩選資源

開發人員工具提供多種工作流程，可篩除與目前工作無關的資源。

「篩選器」工具列。

「篩選器」工具列預設為啟用。如果不可以：

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

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

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

  1. 在「篩選器」輸入框中輸入 png。系統只會顯示含有「png」文字的檔案。在本例中，符合篩選條件的檔案只有 PNG 圖片。

    字串篩選結果會顯示在網路記錄中。

  2. 輸入「/.*\.[cj]s+$/」。如果資源的檔案名稱不是以 j 結尾，或不是以 c 結尾，且後方有 1 個以上的 s 字元，開發人員工具就會將該資源篩除。

    規則運算式篩選器會顯示網路記錄。

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

    網路記錄檔中會顯示負片濾鏡效果。

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

    屬性篩選結果會顯示在「網路」記錄中。

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

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

依資源類型篩選

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

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

    網路面板只顯示 CSS 檔案。

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

    網路面板只顯示 CSS 和 JS 檔案。

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

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

封鎖要求

如果網頁的部分資源無法使用，網頁會如何顯示及運作？是完全故障，還是仍可正常運作？封鎖要求，找出以下資訊：

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

    「網路」面板中的指令選單。

  2. 輸入 block，選取「顯示要求封鎖」，然後按下 Enter 鍵。

    「顯示要求封鎖」選項。

  3. 按一下「新增模式」按鈕。

  4. 輸入「main.css」。

    在「網路」面板中封鎖 main.css

  5. 按一下 [新增]。

  6. 重新載入頁面。如預期，由於網頁的主要 CSS 樣式表遭到封鎖，因此網頁樣式稍微有點混亂。請注意網路記錄中的 main.css 列。紅色文字表示資源遭到封鎖。

    已封鎖 main.css。

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

如要進一步瞭解與檢查網路活動相關的開發人員工具功能，請參閱「網路參考資料」。