Chrome開發者工具詳解(2)-Network面闆

注： 這一篇主要講解面闆Network，參考了Google的相關文檔，主要用于公司内部技術分享。

面闆上包含了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檔案等。

<code>Network</code>面闆可以記錄頁面上的網絡請求的詳情資訊，從發起網頁頁面請求Request後分析HTTP請求後得到的各個請求資源資訊（包括狀态、資源類型、大小、所用時間、Request和Response等），可以根據這個進行網絡性能優化。

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

Controls 控制Network的外觀和功能。

Filters 控制Requests Table具體顯示哪些内容。

Overview 顯示擷取到資源的時間軸資訊。

Requests Table 按資源擷取的前後順序顯示所有擷取到的資源資訊，點選資源名可以檢視該資源的詳細資訊。

Summary 顯示總的請求數、資料傳輸量、加載時間資訊。

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

Name 資源名稱，點選名稱可以檢視資源的詳情情況，包括<code>Headers</code>、<code>Preview</code>、<code>Response</code>、<code>Cookies</code>、<code>Timing</code>。

Status HTTP狀态碼。

Type 請求的資源MIME類型。

Initiator 标記請求是由哪個對象或程序發起的（請求源）。

Parser： 請求由Chrome的HTML解析器時發起的。

Redirect：請求是由HTTP頁面重定向發起的。

Script：請求是由Script腳本發起的。

Other：請求是由其他程序發起的，比如使用者點選一個連結跳轉到另一個頁面或者在位址欄輸入URL位址。

Size 從伺服器下載下傳的檔案和請求的資源大小。如果是從緩存中取得的資源則該列會顯示(from cache)

Time 請求或下載下傳的時間，從發起Request到擷取到Response所用的總時間。

Timeline 顯示所有網絡請求的可視化瀑布流(時間狀态軸)，點選時間軸，可以檢視該請求的詳細資訊，點選列頭則可以根據指定的字段可以排序。

<code>Controls</code>窗格包括的功能有網絡日志錄制、日志清理、捕獲螢幕、過濾器，視圖切換、保留日志開關、Cache開關、網絡連接配接開關、網速閥值。

以捕獲螢幕為例，點選錄影機按鈕（捕獲螢幕），重新加載頁面即可捕獲螢幕。

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

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

<code>DOMContentLoaded</code>和<code>load</code>這兩個事件會高亮顯示。

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

<code>DOMContentLoaded</code>事件在Overview上用一條藍色豎線标記，并且在Summary以藍色文字顯示确切的時間。

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

通過點選某個資源的Name可以檢視該資源的詳細資訊，根據選擇的資源類型顯示的資訊也不太一樣，可能包括如下Tab資訊：

Headers 該資源的HTTP頭資訊。

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

Response 顯示HTTP的Response資訊。

Cookies 顯示資源HTTP的Request和Response過程中的Cookies資訊。

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

針對上面4個Tab進行詳細講解一下各個功能：

① 檢視資源HTTP頭資訊

在Headers标簽裡面可以看到HTTP <code>Request URL</code>、<code>HTTP Method</code>、<code>Status Code</code>、<code>Remote Address</code>等基本資訊和詳細的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響應資料的時間花費。

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

通過按住<code>Shift</code>并且把光标移到資源名稱上，可以檢視該資源是由哪個對象或程序發起的（請求源）和對該資源的請求過程中引發了哪些資源（依賴資源）。

在該資源的上方第一個标記為綠色的資源就是該資源的發起者（請求源），有可能會有第二個标記為綠色的資源是該資源的發起者的發起者，以此類推。

在該資源的下方标記為紅色的資源是該資源的依賴資源。

Measure Resource Loading Times

Understanding Resource Timing

我的個人部落格