這個實作教學課程介紹了一些最常用的開發人員工具檢查網頁網路活動。
如果您想改為瀏覽功能，請參閱網路參考資料。
請繼續閱讀或觀看本教學課程的影片版本：
使用「網路」面板的時機
一般來說，當您需要確認資源已可正常下載或上傳時，請使用「網路」面板。「網路」面板最常見的用途如下：
- 確認資源是否確實上傳或下載。
- 檢查個別資源的屬性，例如 HTTP 標頭、內容、大小等。
如果您想要設法改善網頁載入效能，請不要先使用「網路」面板。 許多類型的載入效能問題與網路活動無關。Lighthouse 面板會針對網頁改善建議提供明確建議，因此您可以先使用 Lighthouse 面板。請參閱「最佳化網站速度」一文。
開啟「Network」面板
如要充分運用本教學課程，請開啟示範頁面，並試用示範頁面上的功能。
開啟開始使用。
圖 1. 示範
建議您將示範移至另一個視窗。
圖 2：示範畫面在一個視窗中顯示，教學課程則會在另一個視窗中顯示
按下 Control+Shift+J 鍵或 Command+Option+J 鍵 (Mac)，即可開啟開發人員工具。「Console」面板會隨即開啟。
圖 3 控制台
建議您將開發人員工具固定在視窗底部。
圖 4 開發人員工具已固定在視窗底部
接著，按一下 [Network] 分頁。「Network」面板會隨即開啟。
圖 5：開發人員工具已固定在視窗底部
目前「Network」(網路) 面板沒有任何內容。這是因為開發人員工具只會在開啟時記錄網路活動，而且自您開啟開發人員工具後沒有發生網路活動。
記錄網路活動
如何查看網頁造成的網路活動：
請重新載入頁面。「網路」面板會將所有網路活動記錄在網路記錄中。
圖 6：網路記錄
網路記錄的每一列都代表一項資源。根據預設，資源會按時間順序列出。最常見的資源通常是主要的 HTML 文件。底部的資源是指最後要求的資源。
每一欄代表資源的相關資訊。圖 6 顯示預設資料欄：
- 狀態：HTTP 回應代碼。
- 類型：資源類型。
- 啟動器。導致應要求資源的原因。按一下「啟動器」欄中的連結，即可前往產生要求的原始碼。
- Time - 要求花費的時間。
Waterfall。要求不同階段的圖表。將滑鼠遊標懸停在瀑布上即可查看明細。
只要開啟開發人員工具，系統就會在網路記錄中記錄網路活動。為了實際示範，請先查看「Network Log」(網路記錄) 的底部，然後記下上次的活動。
現在，請按一下示範中的「Get Data」(取得資料) 按鈕。
再次查看「網路記錄」底部。有一個名為
getstarted.json的新資源。按一下「取得資料」按鈕，頁面就會要求這個檔案。
圖 7. 網路記錄檔中的新資源
顯示詳細資訊
「網路記錄」欄可自行設定。您可以隱藏目前未使用的資料欄。還有許多系統預設會隱藏的資料欄，您可能會覺得很實用。
在「Network Log」表格的標頭上按一下滑鼠右鍵，然後選取「Domain」。系統隨即會顯示每個資源的網域。
圖 8. 啟用「網域」欄
模擬較慢的網路連線
用於建構網站的電腦網路連線速度可能比使用者的行動裝置網路連線更快。透過節流功能，您可以更瞭解網頁在行動裝置上需要多少時間才能載入。
按一下「節流」下拉式選單 (預設為「線上」)。
圖 9. 啟用節流功能
選取「慢速 3G」。
圖 10. 選取慢速 3G 網路
長按「Reload」圖示
，然後選取「Empty Cache And Hard Reload」。
圖 11. 清除快取並強制重新載入
再次造訪時，瀏覽器通常會從本身的快取提供部分檔案，進而加快頁面載入速度。「Empty Cache and Hard Reload」(清除快取及強制重新載入) 功能會強制瀏覽器連上所有資源的網路。如果您想瞭解訪客首次載入網頁的情況，這項功能就能派上用場。
擷取螢幕截圖
螢幕截圖可讓您瞭解網頁載入期間的檢視歷程。
- 按一下「Capture Screenshots」圖示
。 透過「清空快取和硬重新載入」工作流程，再次重新載入頁面。如果您需要複習操作方式，請參閱「模擬較慢的連線」。「螢幕截圖」窗格會提供縮圖，讓您顯示頁面在載入過程中，不同時間點的外觀。
圖 12. 網頁載入的螢幕截圖
按一下第一個縮圖。開發人員工具會顯示當時發生的網路活動。
圖 13：第一個螢幕截圖中發生的網路活動
再按一次「擷取螢幕截圖」
，關閉「螢幕截圖」窗格。再次重新載入網頁。
檢查資源的詳細資料
點選資源即可瞭解詳情。立即試用：
按一下
getstarted.html，系統隨即會顯示「Headers」分頁。您可在這個分頁中檢查 HTTP 標頭。
圖 14：標頭分頁
按一下 [Preview] (預覽) 分頁標籤。畫面上會顯示 HTML 的基本顯示畫面。
圖 15：預覽分頁
API 傳回 HTML 中的錯誤代碼時，這個分頁非常實用。此外，如果 API 讀取轉譯的 HTML 比 HTML 原始碼，或者檢查圖片時也能更容易讀取。
按一下「回應」分頁標籤。畫面上顯示 HTML 原始碼。
圖 16. 「Response」分頁
按一下「時間」分頁標籤。顯示了這項資源的網路活動細目。
圖 17. 「時間」分頁
按一下「Close」圖示
，即可再次查看網路記錄。
圖 18. 「關閉」按鈕
搜尋網路標頭和回應
如要針對特定字串或規則運算式搜尋所有資源的 HTTP 標頭和回應，請使用「Search」窗格。
舉例來說，假設您要檢查資源是否使用合理的快取政策，
按一下「搜尋」圖示
。「Search」(搜尋) 窗格隨即會開啟「Network」(網路記錄) 記錄左側。
圖 19. 搜尋窗格
輸入
Cache-Control，然後按下 Enter 鍵。「Search」窗格會列出在資源標頭或內容中找到的Cache-Control所有例項。
圖 20. 「
Cache-Control」的搜尋結果按一下搜尋結果即可查看。如果系統在標頭中找到查詢，就會開啟「標頭」分頁。如果系統在內容中發現查詢，就會開啟「Response」分頁。
圖 21. 「標頭」分頁中醒目顯示的搜尋結果
關閉「搜尋」窗格和「時間」分頁。
圖 22. 「關閉」按鈕
篩選資源
開發人員工具提供許多工作流程，可用來篩除與目前工作無關的資源。
圖 23. 篩選器工具列
「篩選器」工具列應預設為啟用。否則：
- 按一下「篩選器」圖示
即可顯示篩選器。
依字串、規則運算式或屬性篩選
「篩選器」文字方塊支援多種不同的篩選功能。
在「Filter」文字方塊中輸入
png。只會顯示包含png文字的檔案。在這種情況下，只有符合篩選條件的檔案才會是 PNG 圖片。
圖 24. 字串篩選器
輸入
/.*\.[cj]s+$/。開發人員工具會篩除檔案名稱結尾不是j或c後接 1 或多個s字元的資源。
圖 25. 規則運算式篩選器
輸入
-main.css。開發人員工具會篩除main.css。如有任何其他檔案符合這些模式，也會一併篩除。
圖 26. 排除篩選器
在「Filter」文字方塊中輸入
domain:raw.githubusercontent.com。開發人員工具會篩除網址與這個網域不符的任何資源。
圖 27. 屬性篩選器
如需可篩選屬性的完整清單，請參閱「依屬性篩選要求」。
清除任何文字的「篩選器」文字方塊。
依資源類型篩選
如何聚焦在特定類型的檔案 (例如樣式表)：
按一下「CSS」。系統會過濾掉所有其他檔案類型。
圖 28. 僅顯示 CSS 檔案
如要查看指令碼，請按住 Control 或 Command 鍵 (Mac)，然後按一下「JS」。
圖 29. 僅顯示 CSS 和 JS 檔案
按一下「全部」即可移除篩選器，並再次查看所有資源。
如要瞭解其他篩選工作流程，請參閱「篩選要求」一文。
封鎖要求
當部分資源無法使用時，網頁的外觀和行為如何？測試是否完全失敗？還是有一些功能？封鎖要求以找出：
按下 Control + Shift + P 鍵或 Command+Shift+P 鍵 (Mac)，開啟 Command 選單。
圖 30. 指令選單
輸入
block，選取「Show Request Blocking」，然後按下 Enter 鍵。
圖 31. 顯示要求封鎖
按一下「新增模式」圖示
。輸入
main.css。
圖 32. 正在封鎖
main.css按一下 [新增]。
請重新載入頁面。一如預期，網頁的樣式會稍有打亂，因為網頁的主要樣式表遭到封鎖。請注意網路記錄中的
main.css資料列。紅色文字表示資源已封鎖。
圖 33. 已封鎖「
main.css」取消勾選「啟用要求封鎖功能」核取方塊。
後續步驟
恭喜，您已完成教學課程。按一下「Dispense Award」即可領取獎勵。
請參閱網路參考資料，進一步瞭解與檢查網路活動相關的開發人員工具功能。