Chrome開發者工具詳解(2)：Network皮膚

CharlieChu發表於2016-11-24

Chrome開發者工具皮膚

皮膚上包含了Elements皮膚、Console皮膚、Sources皮膚、Network皮膚、 Timeline皮膚、Profiles皮膚、Application皮膚、Security皮膚、Audits皮膚這些功能皮膚。這些按鈕的功能點如下：

Elements:查詢網頁原始碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器裡面得到反饋。
Console:記錄開發者開發過程中的日誌資訊，且可以作為與JS進行互動的命令列Shell。
Sources:斷點除錯JS。
Network:從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源資訊（包括狀態、資源型別、大小、所用時間等），可以根據這個進行網路效能優化。
Timeline:記錄並分析在網站的生命週期內所發生的各類事件，以此可以提高網頁的執行時間的效能。
Profiles:如果你需要Timeline所能提供的更多資訊時，可以嘗試一下Profiles,比如記錄JS CPU執行時間細節、顯示JS物件和相關的DOM節點的記憶體消耗、記錄記憶體的分配細節。
Application:記錄網站載入的所有資源資訊，包括儲存資料（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、快取資料、字型、圖片、指令碼、樣式表等。
Security:判斷當前網頁是否安全。
Audits:對當前網頁進行網路利用情況、網頁效能方面的診斷，並給出一些優化建議。比如列出所有沒有用到的CSS檔案等。

Network皮膚

概述

Network皮膚可以記錄頁面上的網路請求的詳情資訊，從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源資訊（包括狀態、資源型別、大小、所用時間、Request和Response等），可以根據這個進行網路效能優化。

我把Google官方網站上介紹Network皮膚的圖貼到這裡，該皮膚主要包括5大塊窗格(Pane)：

Controls 控制Network的外觀和功能。
Filters 控制Requests Table具體顯示哪些內容。
Overview 顯示獲取到資源的時間軸資訊。
Requests Table 按資源獲取的前後順序顯示所有獲取到的資源資訊，點選資源名可以檢視該資源的詳細資訊。
Summary 顯示總的請求數、資料傳輸量、載入時間資訊。

其中 Requests Table 顯示如下資訊列：

Name 資源名稱，點選名稱可以檢視資源的詳情情況，包括Headers、Preview、Response、Cookies、Timing。
Status HTTP狀態碼。
Type 請求的資源MIME型別。
Initiator 標記請求是由哪個物件或程式發起的（請求源）。
- Parser：請求由Chrome的HTML解析器時發起的。
- Redirect：請求是由HTTP頁面重定向發起的。
- Script：請求是由Script指令碼發起的。
- Other：請求是由其他程式發起的，比如使用者點選一個連結跳轉到另一個頁面或者在位址列輸入URL地址。
Size 從伺服器下載的檔案和請求的資源大小。如果是從快取中取得的資源則該列會顯示(from cache)
Time 請求或下載的時間，從發起Request到獲取到Response所用的總時間。
Timeline 顯示所有網路請求的視覺化瀑布流(時間狀態軸)，點選時間軸，可以檢視該請求的詳細資訊，點選列頭則可以根據指定的欄位可以排序。

捕獲螢幕

Controls窗格包括的功能有網路日誌錄製、日誌清理、捕獲螢幕、過濾器，檢視切換、保留日誌開關、Cache開關、網路連線開關、網速閥值。

以捕獲螢幕為例，點選攝像機按鈕（捕獲螢幕），重新載入頁面即可捕獲螢幕。

雙擊其中的截圖可以放大顯示，在放大的圖下方可以點選跳轉到上一幀或者下一幀。

單擊則可以檢視該幀被捕獲時的網路請求資訊，並且在Overview上會有一條黃色豎線以標記該幀被捕獲的具體時間點。

檢視DOMContentLoaded和load事件資訊

DOMContentLoaded和load這兩個事件會高亮顯示。

DOMContentLoaded事件會在頁面上DOM完全載入並解析完畢之後觸發，不會等待CSS、圖片、子框架載入完成。 load事件會在頁面上所有DOM、CSS、JS、圖片完全載入完畢之後觸發。

DOMContentLoaded事件在Overview上用一條藍色豎線標記，並且在Summary以藍色文字顯示確切的時間。

load事件同樣會在Overview和Requests Table上用一條紅色豎線標記，在Summary也會以紅色文字顯示確切的時間。

檢視具體資源的詳情

通過點選某個資源的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資訊。

⑤ 分析資源在請求的生命週期內各部分時間花費資訊

在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響應資料的時間花費。