Chrome DevTools — Network -- 轉載

轉載地址：https://segmentfault.com/a/1190000008407729

記錄網絡請求

默認狀況下，只要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列多了一行灰色的文字，表示請求等待響應的時間