Network——網路面板

檢視網路請求，類似於我們測試常用的抓包工具

1、按照請求型別過濾，單擊“網路”面板上的XHR，JS，CSS， Img，Media，Font，Doc，WS（WebSocket），Manifest或 Other（此處未列出的任何其他型別）按鈕。若想選擇多個按住Ctrl不放，點選滑鼠左鍵

2、preserve log，勾選後在重新整理瀏覽器的時候不會清空請求資訊，會保留之前的請求

3、disable cache，禁用瀏覽器快取來模擬首次訪問者
在測試的時候，可以勾選，避免因為快取而帶來的一些問題，報給開發會說你這是因為快取的原因，won't fix

4、模擬網路狀態，online、offline、3G、自定義，在測試弱網或者離線的時候，可以用此選項進行設定

5、設定每條請求記錄的顯示欄位，右鍵可以選擇顯示不同的列，也可以進行排序

6、單擊某一個請求，檢視具體資訊，不贅述，可以參考抓包工具的相關內容

• Headers：檢視請求頭、響應頭以及請求引數
• Preview：檢視響應體的預覽
• Response：檢視響應體
• Cookies：檢視cookies
• Timing：請求時序

7、請求時序，一個請求的時間，都經過了哪些步驟，哪裡比較耗時

• Queueing：瀏覽器在以下情況下將請求排隊：
  • 有更高優先順序的請求
  • 已為該來源打開了六個TCP連線，這是限制。僅適用於HTTP / 1.0和HTTP / 1.1
  • 瀏覽器正在磁碟快取中短暫分配空間
• Stalled：出於佇列中描述的任何原因，該請求都可能被暫停
• DNS Lookup：瀏覽器正在解析請求的IP地址
• Proxy negotiation：瀏覽器正在與代理伺服器協商請求
• Request sent：正在傳送請求
• ServiceWorker Preparation：瀏覽器正在啟動服務工作者
• Request to ServiceWorker：該請求被髮送到服務人員
• Waiting (TTFB)：瀏覽器正在等待響應的第一個位元組。TTFB代表到第一個位元組的時間。此時間包括一次往返延遲和伺服器準備響應所花費的時間
• Content Download：瀏覽器正在接收響應
• Receiving Push：瀏覽器正在通過HTTP / 2伺服器推送接收此響應的資料
• Reading Push：瀏覽器正在讀取先前接收的本地資料

8、檢視請求的發起物件和依賴物件
按住Shift鍵，然後滑鼠懸浮在某個請求上，該請求的發起物件由綠色標誌，該請求的依賴物件由紅色標誌

9、設定

10、概述，此數字僅跟蹤自開啟DevTools以來已記錄的請求。如果在開啟DevTools之前發生了其他請求，則不計算這些請求
分別為請求總數、請求的總下載大小、資源的未壓縮大小、總時間、DOMContentLoaded和load事件的計時

11、禁用請求，想看看當某些指令碼、樣式檔案缺少或者其他資源載入失敗時的表現，選擇某條請求後右擊選擇 Block Request URL，一個新的 禁用請求 面板會在下面顯示，在這裡可以管理被禁用的請求。

快捷連結：
Chrome開發者工具——Elements
Chrome開發者工具——Console

參考資料：
https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn