面板組成

包括控制器、過濾器、概覽、請求列表、概要。

 

• 控制器——控制面板的外觀與功能。
• 過濾器——過濾請求列表中顯示的資源,按住Command（Mac）或Ctrl（Window/Linux），然后點(diǎn)擊過濾器可以同時(shí)選擇多個(gè)過濾器。
• 概覽——顯示HTTP請求、響應(yīng)的時(shí)間軸。
• 請求列表
  • 默認(rèn)時(shí)間排序，可選擇顯示列。
  • 查看所有的資源請求，包括網(wǎng)絡(luò)請求，圖片資源，html、css、js文件等請求。
  • 可以根據(jù)需求篩選請求項(xiàng)，一般多用于網(wǎng)絡(luò)請求的查看和分析，分析后端接口是否正確傳輸，獲取的數(shù)據(jù)是否準(zhǔn)確，請求頭，請求參數(shù)的查看。
• 概要——請求總數(shù)、總數(shù)據(jù)量、總花費(fèi)時(shí)間等。

請求列表

如果選擇All，會(huì)把該頁面所有資源文件請求下來，如果只選擇XHR 異步請求資源，則我們可以分析相關(guān)的請求信息。

請求的相關(guān)信息

打開一個(gè)Ajax異步請求，可以看到它的請求頭信息，是POST請求還是GET請求、參數(shù)有哪些、還可以預(yù)覽它的返回的結(jié)果數(shù)據(jù)，這些數(shù)據(jù)的使用和查看有利于前端和后端工程師們聯(lián)調(diào)數(shù)據(jù)，也方便前端直觀的分析數(shù)據(jù)，同時(shí)，測試工程師報(bào)bug時(shí)可以將這些參數(shù)截圖發(fā)給程序猿，幫助他們快速準(zhǔn)確定位到bug原因所在，提高溝通的效率。

簡單介紹下每列的含義：

Name：資源的名稱

Status：HTTP狀態(tài)代碼

Type：請求的資源的MIME類型

Initiator：發(fā)起請求的對象或進(jìn)程，它可能有以下幾種值：

• Parser（解析器）：Chrome的 HTML 解析器發(fā)起了請求（鼠標(biāo)懸停顯示JS腳本）
• Redirect（重定向）：HTTP重定向啟動(dòng)了請求
• Script（腳本）：腳本啟動(dòng)了請求

Other（其他）：一些其他進(jìn)程或動(dòng)作發(fā)起請求，例如用戶點(diǎn)擊鏈接跳轉(zhuǎn)到頁面或在地址欄中輸入網(wǎng)址。

Size：服務(wù)器返回的響應(yīng)大?。ò^部和包體），可顯示解壓后大小

Time：總持續(xù)時(shí)間，從請求的開始到接受響應(yīng)中的最后一個(gè)字節(jié)

Waterfall：各請求相關(guān)活動(dòng)的直觀分析圖

鼠標(biāo)右鍵單擊，添加其他列：

還可以自定義header頭

預(yù)覽請求內(nèi)容

如圖所示，在請求列表點(diǎn)擊以下

功能包括：

• 查看頭部，包括請求頭、響應(yīng)頭。

• 查看Cookie

• 預(yù)覽響應(yīng)正文：查看圖像用

• 查看響應(yīng)正文

• 時(shí)間詳細(xì)分布

• 導(dǎo)出數(shù)據(jù)為HAR格式

• 查看未壓縮的資源大?。篣se Large Request Rows

• 瀏覽器加載時(shí)間（概覽、概要、請求列表）DOMContentLoaded 事件的顏色設(shè)置為藍(lán)色，而load事件設(shè)置為紅色

• 將請求數(shù)據(jù)復(fù)制到剪貼板

  • Copy Link Address：將請求的網(wǎng)址復(fù)制到剪貼板
  • Copy Response：將響應(yīng)包體復(fù)制到剪貼板
  • Cop as cURL：以 cURL 命令形式復(fù)制請求
  • Copy All as cURL：以一系列 cURL 命令形式復(fù)制所有請求
  • Copy All as HAR：以 HAR 數(shù)據(jù)形式復(fù)制所有請求

• 查看請求上下游：按住 shift 鍵懸停請求上，綠色是上游，紅色是下游。

控制器

模擬慢速網(wǎng)絡(luò)


Queueing：瀏覽器在以下情況下對請求排隊(duì)

• 存在更高優(yōu)先級(jí)的請求
• 此源已打開六個(gè) TCP 連接，達(dá)到限值，僅適用于 HTTP/1.0 和 HTTP/1.1
• 瀏覽器正在短暫分配磁盤緩存中的空間

Stalled：請求可能會(huì)因 Queueing 中描述的任何原因而停止
DNS Lookup：瀏覽器正在解析請求額IP地址
Proxy Negotiation：瀏覽器正在與代理服務(wù)器協(xié)商請求
Request sent：正在發(fā)送請求
ServiceWorker Preparation：瀏覽器正在啟動(dòng)Service Worker
Request to ServiceWorker：正在將請求發(fā)送到Service Worker
Waiting（TTFB）：瀏覽器正在等待響應(yīng)的第一個(gè)字節(jié)。TTFB表示
Time To First Byte（至第一字節(jié)的時(shí)間）。此時(shí)間包括1次往返延遲時(shí)間及服務(wù)器準(zhǔn)備響應(yīng)所用的時(shí)間
Content Download：瀏覽器正在接收響應(yīng)
Receiving Push：瀏覽器正在通過 HTTP/2 服務(wù)器推送接收此響應(yīng)的數(shù)據(jù)
Reading Push：瀏覽器正在讀取之前收到的本地?cái)?shù)據(jù)

Security標(biāo)簽頁 可以告訴你這個(gè)網(wǎng)站的安全性，查看有效的證書等
Audits標(biāo)簽頁 可以幫你分析頁面性能，有助于優(yōu)化前端頁面，分析后得到的報(bào)告。