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