Chrome 開發人員工具詳解(2)：Network 面板

標籤：之間   資源擷取   ini   安全   頁面重新導向   base   byte   eth   執行   

面板上包含了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)：

1. Controls 控制Network的外觀和功能。

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

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

4. Requests Table 按資源擷取的前後順序顯示所有擷取到的資源資訊，點擊資源名可以查看該資源的詳細資料。

5. 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 與Proxy 伺服器串連的時間花費。

• 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並且把游標移到資源名稱上，可以查看該資源是由哪個對象或進程發起的（請求源）和對該資源的請求過程中引發了哪些資源（依賴資源）。

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

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

 

伯樂線上專欄作者 - CharlieChu

原文地址：https://mp.weixin.qq.com/s/OsabDwlBCzTRCnHTOBggKA

Chrome 開發人員工具詳解(2)：Network 面板