f12 Network的解析

本文轉載自查看原文 2020-03-27 17:54 1958 瀏覽器

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主要有5個視窗，分別有不同的功能：
Controls 工具欄：用來控制Network的功能及外觀。
Filters 篩選欄：根據篩選條件篩選請求列表，按住command/ctrl鍵可多選。
Overviews 概覽：資源被加載過來的時間線，如果多條時間線垂直堆疊，表示多個資源被並行加載。
Request Table 請求列表：該視窗列出了所有的資源請求，默認按時間順序排序，點擊某個資源，可以查看更詳細的信息。
Summary 總覽：匯總了請求數量，傳輸數據大小，加載時間等信息。

Network視窗

默認情況下，Request Table 請求列表展示如下信息，當然，在請求列表的表頭右鍵可以配置請求列表顯示的內容。
Name：資源的名稱。
Status：HTTP的狀態碼。
Type：資源的MIME類型。
Initiator：表示請求的上游，即發起者。Parser表示是HTML解析器發起的請求；Redirect表示是HTTP跳轉發起的請求；Script表示是由腳本發起的請求；Other表示是由其他動作發起的請求，比如用戶跳轉或者在導航欄輸入地址等。
Size：請求的大小，包括響應頭和響應體的內容。
Time：請求的時間，從請求開始到請求完全結束。
Timeline：請求的時間線。

右鍵配置請求列表

怎么錄制頁面快照？

選中工具欄的快照圖標，可以錄制頁面快照。

錄制快照

選中某一個快照，在概覽/請求列表出現的黃色豎線，就是該快照被捕捉的真實時間，雙擊快照可以放大。

快照捕獲時間

DOMContentLoaded事件/Load事件的區別？

DOMContentLoaded事件 頁面文檔完全加載並解析完畢之后，會觸發DOMContentLoaded事件，它在兩個地方都有體現：概覽視窗的藍色豎線，總覽視窗的觸發時間。
Load事件 當所有資源加載完成后觸發的，它在三個地方有體現：概覽視窗的紅色豎線，請求列表視窗的紅色豎線，總覽視窗的觸發時間。

DOMContentLoaded/Load事件

結合DOM文檔加載的加載步驟，DOMContentLoaded事件/Load事件觸發時機如下：

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

資源請求明細包含了哪些信息？

點擊請求列表某個請求的名稱，可以查看該請求的詳細信息。詳細信息主要有4個方面：
Headers：資源的HTTP頭
Preview：預覽JSON/image/text資源
Response：資源的HTTP響應頭
Timing：資源的請求生命周期
Cookies：查看HTTP請求頭和響應頭附帶的cookie信息

查看HTTP頭：包含了資源的請求URL，HTTP方法，響應的狀態碼。此外，還列出了HTTP請求頭和響應頭及其值，以及請求參數。

HTTP頭

查看HTTP響應內容：可以清楚的看到HTTP請求的返回結果。

HTTP響應

資源預覽：沒什么好講的，可以查看JSON/image/text等資源。

資源預覽

Cookies：該域名下存儲的cookie信息，其中包含了cookie的特性。

Name：cookie的名稱。
Value：cookie的值。
Domain：cookie所屬域名。
Path：cookie所屬URL。
Expire/Max-Age：cookie的存活時間。
Size：cookie的字節大小。
HTTP：表示cookie只能被瀏覽器設置，而且JS不能修改。
Secure：表示cookie只能在安全連接上傳輸。

Timing：查看資源請求的生命周期，包含Queing/Stalled/Request/Response/Request sent/Waiting/Content Download各個階段。

Timeing

如何查看資源請求的上游和下游？

按時shift鍵，鼠標hover在請求上，可以查看請求的上游和下游，如下圖所示，hover在common.js上，可以看到有一個綠色請求、一個紅色請求。其中綠色請求表示common.js的上游請求，即誰觸發了common.js請求，紅色請求表示common.js的下游請求，即common.js又觸發了什么請求。

查看上下游請求

想對請求列表排序？

請求列表的資源默認是按照起始時間排序，最上面的請求最先發起。點擊表頭的Timeline可以重新排序，主要有如下幾個維度。
Timline - Start Time：按請求的發起時間排序。
Timline - Response Time：按請求的響應時間排序。
Timline - End Time：按請求的結束時間排序。
Timline - Total Duration：按請求的總耗時排序，可以快捷的找出耗時最多的資源。
Timline - Latency：按請求的延遲排序，延遲是指請求發起的時間到響應開始的時間，可以快捷的找出請求等待時間最長（TTFB）的資源。

按Timeline排序

想對請求進行篩選？

通過篩選視窗可以對請求進行多維度的篩選，按住Command/Ctrl鍵可以同時選擇多個篩選條件。

多個篩選條件

此外，篩選框可以實現很多定制化的篩選，比如字符串匹配，關鍵詞篩選等，其中關鍵詞篩選主要有如下幾種：
domain：篩選出指定域名的請求，不僅支持自動補全，還支持*匹配。
has-response-header：篩選出包含指定響應頭的請求。
is：通過is:running找出WebSocket請求。
larger-than：篩選出請求大於指定字節大小的請求，其中1000表示1k。
method：篩選出指定HTTP方法的請求，比如GET請求、POST請求等。
mime-type：篩選出指定文件類型的請求。
mixed-content：篩選出混合內容的請求（不懂啥意思）。
scheme：篩選出指定協議的請求，比如scheme:http、scheme:https。
set-cookie-domain：篩選出指定cookie域名屬性的包含Set-Cookie的請求。
set-cookie-name：篩選出指定cookie名稱屬性的包含Set-Cookie的請求。
set-cookie-value：篩選出指定cookie值屬性的包含Set-Cookie的請求。
status-code：篩選出指定HTTP狀態碼的請求。