chorm開發者工具

介紹

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

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)：

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 與代理服務器鏈接的時間花費。
• 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而且把光標移到資源名稱上，能夠查看該資源是由哪一個對象或進程發起的（請求源）和對該資源的請求過程當中引起了哪些資源（依賴資源）。

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

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