快捷鍵: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:瀏覽器正在讀取之間收到的本地數據