Chrome DevTools — Network -- 轉載

標籤：http重新導向   重新導向   多個   reserve   tar   滑動   滑動條   黃色   表徵圖   

轉載地址：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：瀏覽器與Proxy 伺服器協商消耗的時間

• 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列多了一行灰色的文字，表示請求等待響應的時間

Chrome DevTools — Network -- 轉載