如何使用Chrome的Network面板分析HTTP報文


快捷鍵:Control+Shift+I(Windows)

 

 概要中有抓取的請求數量,傳輸的數據的大小,資源的總計的大小,總共花費的時間,DOMContentLoaded和Load所花費的時間

DOMContentLoaded與load的區別:http://www.cnblogs.com/caizhenbo/p/6679478.html

  • 控制面板:控制面板的外觀與功能
  • 過濾器:過濾請求列表中顯示的資源
      • 按住Ctrl(windows/linux),然后點擊過濾器可以同時選擇多個過濾器
      • 隱藏Datas URLs:CSS圖片等小文件以BASE64格式嵌入HTML中,以減少HTTP
  • 概覽:顯示HTTP請求、響應的時間軸
  • 請求列表:默認時間排序,可選擇顯示列
  • 概要:請求總數,總數據量,總花費時間等

 

過濾器:屬性過濾

  • domain:僅顯示來自指定域的資源,可以使用通配符字符(*)納入多個域
  • has-response-header:顯示包含指定的HTTP響應標頭的資源
  • is: 使用is:running 可查找WebSocket資源  is:from-cache 可查找緩存讀出的資源
  • larger-than:顯示大於指定大小的資源(以字節為單位),將值設置為1000等同於設置為1k
  • method:顯示通過指定HTTP方法類型檢索的資源
  • mime-type:顯示指定的MIME類型的資源
  • scheme:顯示通過未保護HTTP(scheme:http)或受保護HTTPS(scheme:https)檢索的資源
  • set-cookie-domain:顯示具有Set-Cookie表頭並且Domain屬性與指定值匹配的資源。
  • set-cookie-name:顯示具有Set-Cookie表頭並且名稱與指定值匹配的資源
  • set-cookie-value:顯示具有Set-Cookie表頭並且值與指定值匹配的資源
  • status-code:僅顯示HTTP狀態代碼與指定代碼匹配的資源

多屬性間通過空格實現AND實現

請求列表的排序

  • 時間排序默認
  • 按列排序
  • 按活動時間排序(Waterfall右鍵)
      • Start Time:發出的第一個請求位於頂部
      • Response Time:開始下載的第一個請求位於頂部
      • End Time:完成的第一個請求位於頂部
      • Total Duration:連接設置時間和請求/響應時間最短的請求位於頂部
      • Latency:等待最短響應時間的請求位於頂部

請求列表

Initiator:發起的請求對象或進程。它可能有以下幾種值

  • Parser(解析器):Chrome的HTML解析器發起了請求
      • 鼠標懸停顯示js腳本
  • Redirect(重定向):HTTP重定向啟動了請求
  • Script(腳本):腳本啟動了請求
  • Other(其他):一些進程或者動作發起的請求,例如用戶點擊連接跳轉到頁面或在地址欄中輸入的網址

請求列表中的列可以增加或者減少,在列名上面右鍵,可以勾選想要增加或者減少的列,也可添加自定義列

預覽請求內容:

  • 查看頭部
  • 查看cookie
  • 預覽響應正文:查看圖像用
  • 查看響應正文
  • 時間詳細分布
  • 導出數據為HAR格式
  • 瀏覽器加載時間(概覽、概要、請求列表)  
      • DOMContentLoaded事件的顏色設置為藍色,而load事件設置為紅色
  • 將請求數據復制到剪切板
      • Copy Link Address :將請求的網址復制到剪切版
      • Copy Response:將響應包體復制到剪切板
      • Copy as cURL:以cURL命令形式復制到剪切板
      • Copy All as cURL:以一系列cURL命令形式復制所有請求
      • Copy All as HAR:以HAR數據形式復制所有請求
  • 查看請求上下游:按住shift鍵懸停請求上,綠色是上游,紅色是下游

瀏覽器加載時間:

觸發流程:

  • 解析HTML結構
  • 加載外部腳本和樣式表文件
  • 解析並執行腳本代碼//部分腳本會阻塞頁面的加載
  • DOM樹構建完成//DOMContentLoaded事件
  • 加載圖片等外部文件
  • 頁面加載完畢//Load事件

請求時間的詳細分布:

Queueing:瀏覽器在以下情況下對請求排隊

  • 存在更高優先級的請求
  • 此源已打開六個TCP連接,達到限值,僅適用於HTTP1.0/HTTP1.1
  • 瀏覽器正在短暫分配磁盤緩存中的空間

Stalled:請求可能會因Queueing中描述的任何原因而停止

(Stalled階段時TCP連接的檢測過程,如果檢測成功就會繼續使用該TCP連接發送數據,如果檢測失敗就會重新建立TCP連接。所以出現stalled階段過長,往往是丟包所致,這也意味着網絡或服務端有問題。)

DNS Lookup:瀏覽器正在解析請求的IP地址

Proxy Negotiation:瀏覽器正在與代理服務器協商請求

Request sent :正在發送請求

ServiceWork Preparation:瀏覽器正在啟動Service Worker

Request to ServiceWork:正在將請求發送到Service Worker

Waiting(TTFB):瀏覽器正在等待響應的第一個字節。TTFB表示Time To First Byte(至第一個字節的時間)。此時間包括1次往返延遲的時間及服務器准備響應所用的時間。

Content Download:瀏覽器正在接受收應

Receiving Push:瀏覽器正在通過HTTP/2服務器推送接收此響應的數據

Reading Push:瀏覽器正在讀取之間收到的本地數據


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM