一、Chrome 抓包：Network 面板
1、 Network 面板
• 控制器：控制面板的外觀與功能
• 過濾器：過濾請求列表中顯示的資源
• 按住 Command （Mac）或 Ctrl （Window / Linux），然后點擊過濾器可以同時選擇多個過濾器
• 概覽：顯示 HTTP 請求、響應的時間軸
• 請求列表：默認時間排序，可選擇顯示列
• 概要：請求總數、總數據量、總花費時間等
2、控制器
要跨頁面加載保存請求Preserve log
用戶的網絡比較差的時候問題就可以復現
二、過濾器
1、過濾器：按類型
XHR、JS、CSS、Img、Media、Font、Doc、WS (WebSocket)、Manifest 或 Other（此處未列出的任何其他類型）
多類型，按住 Command (Mac) 或 Ctrl（Windows、Linux）
按時間過濾：概覽面板，拖動滾動條
隱藏 Data URLs：CSS 圖片等小文件以 BASE64 格式嵌入 HTML 中，以減少 HTTP請求數
隱藏前
隱藏后
2、過濾器：屬性過濾（一）
domain：僅顯示來自指定域的資源。 您可以使用通配符字符 (*) 納入多個域
domain:*.alicdn.com method:GET
has-response-header：顯示包含指定 HTTP 響應標頭的資源
is：使用 is:running 可以查找 WebSocket 資源，is:from-cache 可查找緩存讀出的資源
is:from-cache
未選中前
選中后
larger-than： 顯示大於指定大小的資源（以字節為單位）。 將值設為 1000 等同於設置為 1k
method：顯示通過指定 HTTP 方法類型檢索的資源
mime-type：顯示指定 MIME 類型的資源
多屬性間通過空格實現 AND 操作
3、過濾器：屬性過濾（二）
• mixed-content：顯示所有混合內容資源 (mixed-content:all)，或者僅顯示當前顯示的資源(mixed-content:displayed)。
• 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 操作
三、請求列表的排序
時間排序，默認
• 按列排序
• 按活動時間排序
Start Time ：發出的第一個請求位於頂部
Response Time ：開始下載的第一個請求位於頂部
End Time ：完成的第一個請求位於頂部
Total Duration ：連接設置時間和請求/響應時間最短的請求位於頂部
Latency ：等待最短響應時間的請求位於頂部
請求列表（一）
• Name : 資源的名稱
• Status : HTTP 狀態代碼
• Type : 請求的資源的 MIME 類型
請求列表（二）
Initiator : 發起請求的對象或進程。它可能有以下幾種值：
• Parser （解析器） : Chrome的 HTML 解析器發起了請求
• 鼠標懸停顯示 JS 腳本
• Redirect （重定向） : HTTP 重定向啟動了請求
• Script （腳本） : 腳本啟動了請求
• Other （其他） : 一些其他進程或動作發起請求，例如用戶點擊鏈接跳轉到頁面或在地址欄中輸入網址
請求列表（三）
• Size : 服務器返回的響應大小（包括頭部和包體），可顯示解壓后大小
• Time : 總持續時間，從請求的開始到接收響應中的最后一個字節
• Waterfall：各請求相關活動的直觀分析圖
請求列表
四、預覽請求內容
預覽請求內容（一）
查看頭部
• 查看 cookie
• 預覽響應正文：查看圖像用
• 查看響應正文
• 時間詳細分布
• 導出數據為 HAR 格式
• 查看未壓縮的資源大小：Use Large Request Rows
預覽請求內容（二）
• 瀏覽器加載時間（概覽、概要、請求列表）
• 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 事件
1、請求時間詳細分布（一）
• Queueing: 瀏覽器在以下情況下對請求排隊
- • 存在更高優先級的請求
- • 此源已打開六個 TCP 連接，達到限值，僅適用於 HTTP/1.0 和 HTTP/1.1
- • 瀏覽器正在短暫分配磁盤緩存中的空間
• Stalled: 請求可能會因 Queueing 中描述的任何原因而停止
• DNS Lookup: 瀏覽器正在解析請求的 IP 地址
• Proxy Negotiation: 瀏覽器正在與代理服務器協商請求
2、請求時間詳細分布（二）
• Request sent: 正在發送請求
• ServiceWorker Preparation: 瀏覽器正在啟動 Service Worker
• Request to ServiceWorker: 正在將請求發送到 Service Worker
• Waiting (TTFB): 瀏覽器正在等待響應的第一個字節。 TTFB 表示 Time To First Byte
（至第一字節的時間）。 此時間包括 1 次往返延遲時間及服務器准備響應所用的時間
• Content Download: 瀏覽器正在接收響應
• Receiving Push: 瀏覽器正在通過 HTTP/2 服務器推送接收此響應的數據
• Reading Push: 瀏覽器正在讀取之前收到的本地數據
