Chrome教程（一）NetWork面板分析網絡請求

官方文檔：https://developers.google.com/web/tools/chrome-devtools/network/

1.如何打開

不管是在Windows仍是Mac，均可以使用（FN）+F12鍵打開Chrome的Network面板。

2.面板組成

如圖所示，Chrome的Network面板主要由5個部分組成，包括控制器、過濾器、概覽、請求列表、概要，下面簡單介紹下這5個部分的做用。

控制器：控制面板的外觀與功能

過濾器：過濾請求列表中顯示的資源

• 按住Command（Mac）或Ctrl（Window/Linux），而後點擊過濾器能夠同時選擇多個過濾器。

概覽：顯示HTTP請求、響應的時間軸。

請求列表：默認時間排序，可選擇顯示列。

概要：請求總數、總數據量、總花費時間等。

3.控制器

模擬慢速網絡

還能夠自定義，點擊Add…

4.過濾器

如何對請求進行過濾呢？

4.1按字符串

1.鍵入png到過濾文本框。僅顯示包含文本的文件png。在這種狀況下，與過濾器匹配的惟一文件是PNG圖像。

2.類型/.*\.[cj]s+$/。DevTools過濾掉任何資源，其文件名不以a j或c後跟1個或多個s字符結尾。

3.類型-main.css。DevTools過濾掉了main.css。若是任何其餘文件與模式匹配，它們也將被過濾掉。

4.2按類型

• XHR、JS、CSS、Img、Media、Font、Doc、WS（WebSocket）、Manifest或Other（此處爲列出的任何其餘類型）
• 多個類型，按住Command（Mac）或Ctrl（Windows、Linux）
• 按時間過濾：概覽面板，拖動滾動條
• 隱藏Data URLs：CSS圖片等小文件以 BASE64 格式嵌入HTML中，以減小HTTP請求數。

4.3屬性過濾

下面演示使用Filter過濾器，如圖所示：

• domain:僅顯示來自指定域的資源。您能夠使用通配符字符（*）歸入多個域
• has-response-header：顯示包含指定HTTP響應標頭的資源
• is：使用 is:running 能夠查找 WebSocket 資源，is:from-cache 可查找緩存讀出的資源
• Larget-than：顯示大於指定大小的資源（以字節爲單位）。將值設爲1000等同於設置爲1k
• method：顯示經過指定 HTTP 方法類型檢索的資源
• mime-type：顯示指定 MIME 類型的資源
• 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 操做。

5.請求列表的排序

1. 時間排序，默認

2. 按列排序

3. 按活動時間排序

   • Start Time：發出的第一個請求位於頂部
   • Response Time：開始下載的第一個請求位於頂部
   • End Time：完成的第一個請求位於頂部
   • Total Duration：鏈接設置時間和請求/響應時間最短的請求位於頂部
   • Latency：等待最短響應時間的請求位於頂部

6.請求列表

簡單介紹下每列的含義：

Name：資源的名稱

Status：HTTP狀態代碼

Type：請求的資源的MIME類型

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

• Parser（解析器）：Chrome的 HTML 解析器發起了請求（鼠標懸停顯示JS腳本）
• Redirect（重定向）：HTTP重定向啓動了請求
• Script（腳本）：腳本啓動了請求
• Other（其餘）：一些其餘進程或動做發起請求，例如用戶點擊連接跳轉到頁面或在地址欄中輸入網址。

Size：服務器返回的響應大小（包括頭部和包體），可顯示解壓後大小

Time：總持續時間，從請求的開始到接受響應中的最後一個字節

Waterfall：各請求相關活動的直觀分析圖

鼠標右鍵單擊，添加其餘列：

還能夠自定義header頭：

7.預覽請求內容

如圖所示，在請求列表點擊如下

功能包括：

• 查看頭部，包括請求頭、響應頭。
• 查看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 鍵懸停請求上，綠色是上游，紅色是下游。

下面演示如何查看請求上下游，首先按住 shift 鍵，其次移動鼠標到不一樣請求，如圖所示：

8.瀏覽器加載時間

觸發流程：

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

9.請求時間詳細分佈

點擊請求列表後，找到Timing，看到如圖所示的字段

Queueing：瀏覽器在如下狀況下對請求排隊

• 存在更高優先級的請求
• 此源已打開六個 TCP 鏈接，達到限值，僅適用於 HTTP/1.0 和 HTTP/1.1
• 瀏覽器正在短暫分配磁盤緩存中的空間

Stalled：請求可能會因 Queueing 中描述的任何緣由而中止

DNS Lookup：瀏覽器正在解析請求額IP地址

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

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：瀏覽器正在讀取以前收到的本地數據

10.阻止請求

當某些資源不可用時，頁面的外觀和行爲如何？它徹底失敗了，仍是仍然有些功能？阻止要求查找：

1.按Control+ Shift+ P或 Command+ Shift+ P（Mac）打開命令菜單。

2.鍵入block，選擇「 顯示請求阻止」，而後按Enter。

3.單擊添加模式。

4.類型main.css。

5.單擊添加。

6.從新加載頁面。正如預期的那樣，頁面的樣式有點混亂，由於它的主樣式表已被阻止。請注意main.css網絡日誌中的行。紅色文本表示資源已被阻止。

main.css已被封鎖

7.取消選中啓用請求阻止複選框。