Chrome DevTools — Network -- 【轉】

記錄網絡請求

默認情況下，只要DevTools在開啓狀態，DevTools會記錄所有的網絡請求，當然，記錄都是在Network面板展示的。

停止記錄網絡請求

點擊Stop recording network log紅色圖標，當它變爲灰色時，表示DevTools不在記錄請求
在Network面板下，Command+E(Mac)或者Ctrl+E(Windows,Linux)

清除網絡請求

跨頁面加載時，保留網絡請求記錄

當頁面重載或者頁面跳轉時，默認情況下，Network面板下的網絡請求記錄表也是刷新的。如果想保留之前頁面的網絡請求數據，可以勾選Preserve log。
常用的一個應用場景：登錄/註冊時會調用登錄/註冊API，開發者想查看這個接口返回的情況，但是登錄/註冊成功後一般會跳轉到新的頁面，導致了Network面板的請求記錄被刷新從而看不到登錄/註冊接口返回的情況。此時勾選上Preserve log，無論跳轉到那個頁面，都能在Network網絡請求記錄表中查看到之前接口返回的情況。

頁面加載時捕獲屏幕截圖

捕獲屏幕截圖可以分析在頁面加載的過程中，用戶在不同的時間段內看到的網頁是什麼樣子的。
點擊Capture screenshots圖標開啓捕獲功能，當圖標變爲藍色表示已開啓，重載頁面即可看到不同時間的屏幕截圖。

捕獲屏幕截圖之後，可以進行以下操作：

鼠標懸浮在一張圖片上時，該圖片四周會出現一個黃色的邊框，同時，在Overview和Waterfall窗口裏面也分別有一條黃色的豎線，這條黃色的豎線表示這張圖片的捕獲時間
點擊某一張圖片，可以過濾掉在這張圖片捕獲之後發生的所有請求
雙擊圖片，可以放大該圖片

改變頁面加載時的條件

禁用瀏覽器緩存

在http請求的過程中，有些資源在頁面初次加載之後會被緩存到瀏覽器中，也就是那些狀態碼爲304的資源。爲了儘可能準確地模擬用戶第一次加載我們網頁時的情景，需要禁用瀏覽器緩存，這樣，每一個請求都是從服務端傳送過來的，較爲準確地反應出網頁初次加載的實際情況。

模擬網速條件

在Network Throttling下拉框中可以選擇不同的網絡條件進行模擬，如2G、3G、4G、WiFi等。

除了選中已有的網絡選項，也可以自定義網速相關條件：打開Network Throttling菜單，選擇Custom > Add。

另一種模擬情況較爲特殊，就是無網絡。利用service workers，PWA(Progressive Web Apps)在無網絡的情況下依然可以使用。模擬這種無網絡環境，直接勾選Offline即可。

提示：有時候開發者會看到Network左側有個警告圖標，這個圖標就是提示開發者當前處於模擬網絡條件下。

手動清除瀏覽器緩存、cookies

在網絡請求記錄表裏面右鍵，選擇Clear Browser Cache或Clear Browser Cookies。

覆蓋用戶代理

打開Network抽屜面板：在DevTools下，按Esc鍵即可調出DevTools的抽屜面板，可以選擇、切換不同的Tab選項。

Network抽屜面板打開以後，不勾選Select automatically複選框，然後選擇一個用戶代理或者自定義一個。

過濾請求

根據屬性過濾

那個漏斗，對，就是它，點擊漏斗圖標使其顏色變爲藍色，然後就可以對網絡請求表中的數據進行進一步的過濾。

在輸入框中可以輸入一些字符串、域、大小、狀態碼、媒體類型等等，如果業務比較簡單，可能輸入一些字符串就搜索到自己想要的結果了。可輸入的詳細類型可參考官方文檔。

根據類型過濾

這裏是可以多選的：按住Command(Mac)鍵或Ctrl(Windows,Linux)鍵，然後單擊不同的類型，如點擊JS和Img，則過濾出js文件和圖片。顯然，All不與其他類型共存，選擇All的時候不能再選某一個具體類型。

隱藏`data URLs`

data URLs指一些嵌入到文檔中的小型文件，在請求表裏面以data:開頭的文件就是，如較爲常見的svg文件。勾選Hide data URLs複選框即可隱藏此類文件。

根據時間過濾

點擊下圖中綠色方框的圖標，顯示/隱藏Overview窗口。在Overview窗口分別拖動左邊或右邊橙色圓圈中的滑動條，就可過濾出位於兩個滑動條之間這段時間發出的請求，不是在這段時間發出的請求就被隱藏掉了。

對請求表進行排序

按照列的類型排序

點擊請求表每一列的列頭，即可按照相應的類型進行排序，如，點擊Size，則可按照資源從小到大或者從大到小（點擊Size自動切換）進行排序。

按照請求的不同階段排序

在請求表的列頭右鍵，然後鼠標移動到Waterfall，然後選擇以下選項，默認按照對應時間從短到長的順序排列：

Start Time：請求開始的時間（默認）
Response Time：資源開始下載的時間
End Time：請求結束的時間
Total Duration：請求的整個持續時間（發起至下載結束）
Latency 請求等待響應的時間

比如，選擇了Total Duration，Waterfall如下圖所示：

注：上圖中的不同顏色代表不同的文件類型，如js、img、css等。每個請求的瀑布流圖像都分爲淺色部分和深色部分，淺色部分表示等待時間，深色部分表示下載時間，如上圖中129ms是等待時間，110ms是下載資源所用的時間。

分析請求

查看請求記錄

請求表默認顯示以下列：

Name：文件的名字或者資源的標識符
Status：HTTP狀態碼
Type：請求資源的MIME類型
Initiator：以下對象或處理可以發起一個請求
- Parse：Chrome的HTML解析器
- Redirect：HTTP重定向
- Script：js函數
- Other：一些別的處理或操作，比如通過鏈接導航到一個頁面，或者是在瀏覽器的地址欄輸入一個地址然後回車
Size：響應頭大小+響應體大小
Time：總的持續時間，從發起請求到資源下載完成
Waterfall：每一個請求活動的不同階段的可視化展示

增加或者刪除列

在請求表的頭部右鍵選擇一個選項使其顯示或隱藏。

增加自定義的列

在請求表的頭部右鍵，Response Headers > Manage Header Columns

查看請求時間

在Waterfall查看某個請求相對於其他請求所消耗的時間長短及先後順序。默認是以請求發起的時間排序的，所以，瀑布流中，越靠左的請求，發起的時間越早。

Headers：查看請求頭、響應頭以及請求參數

在列Name下，點擊某個請求的URL，可以查看到請求、響應的詳細內容。

默認情況下，請求、響應頭是按照字母表順序顯示的http頭部的名字，如果想按照實際接收的順序顯示，點擊上圖中的view source，反之點擊上圖中的view parsed。
在Headers選項卡中也可查看請求的參數，上圖橙色方框部分。也有view source和view parsed，另外還有參數編碼格式（view URL encoded）和解碼格式（view decoded）。

Preview：查看響應體的預覽

Response：查看響應體

Cookies：查看cookies

Timing：查看請求在各個階段對應的時間

各個時間段的意思：

Queueing：瀏覽器會在以下情況對請求進行排隊：
- 有更高優先級的請求
- 在這個域下，已經有6個TCP連接了，達到Chrome最大限制數量。此條規則僅適用在HTTP/1.0和HTTP/1.1
Stalled：Queueing中的任何一個因素髮生都會導致該請求被拖延
Proxy negotiation：瀏覽器與代理服務器協商消耗的時間
DNS Lookup：瀏覽器對請求的IP地址進行DNS查找所消耗的時間
Initial conncection：發起連接所消耗的時間
Request sent：請求發送消耗的時間
Waiting (TTFB)：瀏覽器等待響應的時間，TTFB表示 Time To First Byte
Content Download：資源下載所消耗的時間

查看請求的發起對象和依賴對象

在請求表的頭部已經做過Initiator的簡單介紹，其表示該條請求是由哪個對象或是處理操作發起的。如果B請求是由A請求發起的，顯然，A是B的發起對象，B是A的依賴對象（B依賴A）。
按住Shift鍵，然後鼠標懸浮在某個請求上，該請求的發起對象由綠色標誌，該請求的依賴對象由紅色標誌。

查看加載事件

DevTools在多個地方顯示了DOMContentLoaded和load事件發生時對應的時間。DOMContentLoaded事件對應藍色的線（或者文字），load事件對應紅色的線（或者文字）

查看請求的總數量和總大小

注：這裏的數據表示DevTools打開以後被記錄的請求所對應的數據，如果有些請求在DevTools打開之前已經發生了，這些請求的數據是不計算在這裏面的。

改變`Network`面板的佈局

過濾器的顯示隱藏（已經介紹）
Overview窗口的顯示隱藏（已經介紹）
請求表有簡版和詳細版兩種不同的顯示，默認是簡版

點擊下圖中的圖標，可切換兩種顯示方式。圖標爲藍色時表示詳細版，爲灰色時表示簡版。

下面我們來看看兩種顯示方式的差異：

其實詳細版就是多提供了一部分信息：

Name列多了一行灰色的文字，表示該資源的路徑
Status列多了一行灰色的文字，表示HTTP狀態碼對應的文本
Initiator列多了一行灰色的文字，表示發起對象類型
Size列多了一行灰色的文字，表示該資源的實際大小
Size列的第一行數據表示請求頭和請求體的大小之和，由於HTTP請求的多樣，會導致第一行數據的大小和第二行數據大小的不同，有可能第一行的數據比第二行的數據大，也可能第一行的數據比第二行的數據小，一般有以下幾種原因：
- 有響應頭，甚至包含cookie（第一行 > 第二行）
- 請求被緩存了（一般情況下，第一行 < 第二行）
- 服務端gizp壓縮（一般情況下，第一行 < 第二行）
Time列多了一行灰色的文字，表示請求等待響應的時間