chrome瀏覽器開發者工具 network 使用筆記

文章是參考下面兩篇博文寫的,我感受有幾點內容,下面文章都沒說到,因此整理了下,並作了補充(沒說到的使用引用標記了).
參考連接
http://www.jianshu.com/p/4719...
https://www.cnblogs.com/Libra...
注,我使用的 chrome 是 mac 62.0.3202.94（正式版本）（64 位）

network面板主要分爲5個部分

1.Controls 控制 network 的外觀和功能,

是否開啓 network 的日誌功能,若是灰色的,就表明未開啓,紅色的表明已開啓.

表明清除 network 日誌

是捕獲屏幕,默認是關閉狀態,點擊後圖標變成藍色,會記錄頁面在不一樣時間下的快照

表明是否開啓過濾選項
表明是否使用更大的區域顯示請求記錄

表明是否顯示overview歸納

勾選了該選項後,會對網絡請求按表單名稱進行分組,以下圖所示

是網絡日誌記錄,若是勾上,頁面刷新後,日誌也不會消失(這功能頗有用,好比頁面跳轉後,你想看頁面跳轉前發出的請求有哪些,好比查看別人網站登陸請求,登陸成功返回什麼,登陸成功後又發起了些什麼請求,重定向到什麼地址)

是緩存開關

是網絡鏈接開關

這個下拉列表是網速閥值,能夠設置上傳下載最大網速等.通常能夠網頁在不一樣網絡狀態下的顯示效果

開啓捕獲屏幕選項後,network 面板會出現上圖中紅框區域,而且提示你從新刷新頁面.


雙擊其中的截屏能夠方法顯示,在放大的圖下方能夠點擊跳轉到上一幀或者下一幀.
單擊則能夠查看該幀所處時間的網絡請求信息,而且在 overview 上會有一條黃色豎線標記該幀捕獲的具體時間記錄

2.Filters控制 request Table 具體顯示哪些內容

能夠進行模糊搜索(只搜索url
地址),若是首尾加上/,則表示使用正則匹配(同時搜索 URL 地址和返回內容)舊版本 chrome 可能會在過濾輸入框右邊有個 regexp 選項,勾選了正則纔會生效

篩選框能夠實現不少定製化的篩選，好比字符串匹配，關鍵詞篩選等，其中關鍵詞篩選主要有以下幾種：
domain：篩選出指定域名的請求，不只支持自動補全，還支持*匹配。
has-response-header：篩選出包含指定響應頭的請求。
is：經過is:running找出WebSocket請求。
larger-than：篩選出請求大於指定字節大小的請求，其中1000表示1k。
method：篩選出指定HTTP方法的請求，好比GET請求、POST請求等。
mime-type：篩選出指定文件類型的請求。
mixed-content：篩選出混合內容的請求（不懂啥意思）。
scheme：篩選出指定協議的請求，好比scheme:http、scheme:https。
set-cookie-domain：篩選出指定cookie域名屬性的包含Set-Cookie的請求。
set-cookie-name：篩選出指定cookie名稱屬性的包含Set-Cookie的請求。
set-cookie-value：篩選出指定cookie值屬性的包含Set-Cookie的請求。
status-code：篩選出指定HTTP狀態碼的請求。

這個選項勾選了後隱藏連接的域名,即不顯示所有連接(恩,我暫時還沒發現有什麼用)

按類別過濾request Table顯示的記錄.
若是想同時進行多維度的篩選，按住Command/Ctrl鍵能夠同時選擇多個篩選條件。

3.Overview 顯示獲取到資源的時間軸信息。
按時間顯示各個請求加載的開始時間,結束時間,能夠在overview 中選擇時間區域,request table 中只顯示該時間區域中加載的請求

4.request table 按請求時間列出各個請求的概要信息,單擊某條記錄,會顯示詳細信息

單擊這個區域,能夠對記錄指定字段進行升序或者降序排序
name 表示資源名稱,點擊名稱能夠查看資源的詳細狀況
status http 請求狀態碼
type 請求只有的 mime 類型
initiator 標記請求是由哪一個對象或進程發起的(請求源)

• parser: 請求由 chrome 的 HTML 解析器發起

• redirect: 請求是由 http 頁面發起的重定向

• script: 請求是由 script 腳本發起的

• other: 請求是由其餘進程發起的,好比用戶點擊一個連接跳轉到另外一個頁面或者在地址欄輸入 URL 地址

size 從服務器下載的文件和請求的資源大小,若是是從緩存獲取的資源,該列會顯示from cache
time 請求或下載的時間,從發起 request 到獲取 response 所用的總時間
timeline 顯示全部網絡請求的可視化瀑布流(時間狀態軸)能夠查看該請求的詳細信息
點擊timeline表頭,能夠對 timeline 進行排序，主要有以下幾個維度。

• Timline - Start Time：按請求的發起時間排序。

• Timline - Response Time：按請求的響應時間排序。

• Timline - End Time：按請求的結束時間排序。

• Timline - Total Duration：按請求的總耗時排序，能夠快捷的找出耗時最多的資源。

• Timline - Latency：按請求的延遲排序，延遲是指請求發起的時間到響應開始的時間，能夠快捷的找出請求等待時間最長（TTFB）的資源。

查看具體資源的詳情

經過點擊某個資源的Name能夠查看該資源的詳細信息，根據選擇的資源類型顯示的信息也不太同樣，可能包括以下Tab信息：

• Headers 該資源的HTTP頭信息。

• Preview 根據你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。

• Response 顯示HTTP的Response信息。

• Cookies 顯示資源HTTP的Request和Response過程當中的Cookies信息。

• Timing 顯示資源在整個請求生命週期過程當中各部分花費的時間。

針對上面4個Tab進行詳細講解一下各個功能：
① 查看資源HTTP頭信息
在Headers標籤裏面能夠看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和詳細的Response Headers 、Request Headers以及Query String Parameters或者Form Data等信息。
② 查看資源預覽信息
在Preview標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應的預覽信息。下圖顯示的是當選擇的資源是JSON格式時的預覽信息。
③ 查看資源HTTP的Response信息
在Response標籤裏面可根據選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應資源的Response響應內容(純字符串)。下圖顯示的是當選擇的資源是CSS格式時的響應內容。
④ 查看資源Cookies信息
若是選擇的資源在Request和Response過程當中存在Cookies信息，則Cookies標籤會自動顯示出來，在裏面能夠查看全部的Cookies信息。

Name：cookie的名稱。
Value：cookie的值。
Domain：cookie所屬域名。
Path：cookie所屬URL。
Expire/Max-Age：cookie的存活時間。
Size：cookie的字節大小。
HTTP：表示cookie只能被瀏覽器設置，並且JS不能修改。
Secure：表示cookie只能在安全鏈接上傳輸。

⑤ 分析資源在請求的生命週期內各部分時間花費信息
在Timing標籤中能夠顯示資源在整個請求生命週期過程當中各部分時間花費信息，可能會涉及到以下過程的時間花費狀況：

• Queuing 排隊的時間花費。可能因爲該請求被渲染引擎認爲是優先級比較低的資源（圖片）、服務器不可用、超過瀏覽器的併發請求的最大鏈接數（Chrome的最大併發鏈接數爲6）.

• Stalled 從HTTP鏈接創建到請求可以被髮出送出去(真正傳輸數據)之間的時間花費。包含用於處理代理的時間，若是有已經創建好的鏈接，這個時間還包括等待已創建鏈接被複用的時間。

• Proxy Negotiation 與代理服務器鏈接的時間花費。

• DNS Lookup 執行DNS查詢的時間。網頁上每個新的域名都要通過一個DNS查詢。第二次訪問瀏覽器有緩存的話，則這個時間爲0。

• Initial Connection / Connecting 創建鏈接的時間花費，包含了TCP握手及重試時間。

• SSL 完成SSL握手的時間花費。

• Request sent 發起請求的時間。

• Waiting (Time to first byte (TTFB)) 是最初的網絡請求被髮起到從服務器接收到第一個字節這段時間，它包含了TCP鏈接時間，發送HTTP請求時間和得到響應消息第一個字節的時間。

• Content Download 獲取Response響應數據的時間花費。

TTFB這個部分的時間花費若是超過200ms，則應該考慮對網絡進行性能優化了，能夠參見網絡性能優化方案及裏面的相關參考文檔。

如何查看資源的發起者(請求源)和依賴項
經過按住Shift而且把光標移到資源名稱上，能夠查看該資源是由哪一個對象或進程發起的（請求源）和對該資源的請求過程當中引起了哪些資源（依賴資源）。
在該資源的上方第一個標記爲綠色的資源就是該資源的發起者（請求源），有可能會有第二個標記爲綠色的資源是該資源的發起者的發起者，以此類推。
在該資源的下方標記爲紅色的資源是該資源的依賴資源。

5.summary 顯示中的請求數,數據傳輸量,加載時間信息

總共發起61個請求,加載數據量爲1.4MB,完成時間爲1.9分鐘,DOMContentLoaded在 5.02s 後觸發,load事件在1.3分鐘時觸發

DOMContentLoaded事件是在頁面上DOM徹底加載並解析完畢以後觸發，不會等待CSS、圖片、子框架加載完成。DOMContentLoaded事件在Overview上用一條藍色豎線標記，而且在Summary以藍色文字顯示確切的時間。
load事件是在頁面上全部DOM、CSS、JS、圖片徹底加載完畢以後觸發。load事件一樣會在Overview和Requests Table上用一條紅色豎線標記，在Summary也會以紅色文字顯示確切的時間。

結合DOM文檔加載的加載步驟，DOMContentLoaded事件/Load事件觸發時機以下：

1. 解析HTML結構。

2. 加載外部腳本和樣式表文件。

3. 解析並執行腳本代碼。// 部分腳本會阻塞頁面的加載

4. DOM樹構建完成。//DOMContentLoaded 事件

5. 加載圖片等外部文件。

6. 頁面加載完畢。//load 事件