【轉(zhuǎn)載】
Chrome 開發(fā)者工具詳解(2):Network 面板
作者:伯樂在線專欄作者 - CharlieChu
點擊 → 了解如何加入專欄作者
如需轉(zhuǎn)載氯材,發(fā)送「轉(zhuǎn)載」二字查看說明
Chrome開發(fā)者工具詳解(1):Elements耿币、Console、Sources面板
Chrome開發(fā)者工具面板
面板上包含了Elements面板、Console面板氮发、Sources面板榜旦、Network面板、 Timeline面板竟闪、Profiles面板离福、Application面板、Security面板炼蛤、Audits面板這些功能面板妖爷。
這些按鈕的功能點如下:
Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動修改任一元素的屬性和樣式且能實時在瀏覽器里面得到反饋。
Console:記錄開發(fā)者開發(fā)過程中的日志信息理朋,且可以作為與JS進行交互的命令行Shell絮识。
Sources:斷點調(diào)試JS。
Network:從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息(包括狀態(tài)嗽上、資源類型次舌、大小、所用時間等)兽愤,可以根據(jù)這個進行網(wǎng)絡(luò)性能優(yōu)化彼念。
Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件,以此可以提高網(wǎng)頁的運行時間的性能浅萧。
Profiles:如果你需要Timeline所能提供的更多信息時逐沙,可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細(xì)節(jié)、顯示JS對象和相關(guān)的DOM節(jié)點的內(nèi)存消耗洼畅、記錄內(nèi)存的分配細(xì)節(jié)吩案。
Application:記錄網(wǎng)站加載的所有資源信息,包括存儲數(shù)據(jù)(Local Storage帝簇、Session Storage徘郭、IndexedDB、Web SQL己儒、Cookies)崎岂、緩存數(shù)據(jù)、字體闪湾、圖片冲甘、腳本、樣式表等。
Security:判斷當(dāng)前網(wǎng)頁是否安全江醇。
Audits:對當(dāng)前網(wǎng)頁進行網(wǎng)絡(luò)利用情況濒憋、網(wǎng)頁性能方面的診斷,并給出一些優(yōu)化建議陶夜。比如列出所有沒有用到的CSS文件等凛驮。
Network面板
概述
Network面板可以記錄頁面上的網(wǎng)絡(luò)請求的詳情信息,從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息(包括狀態(tài)条辟、資源類型黔夭、大小、所用時間羽嫡、Request和Response等)本姥,可以根據(jù)這個進行網(wǎng)絡(luò)性能優(yōu)化。
我把Google官方網(wǎng)站上介紹Network面板的圖貼到這里杭棵,該面板主要包括5大塊窗格(Pane):
1.Controls 控制Network的外觀和功能婚惫。
2.Filters 控制Requests Table具體顯示哪些內(nèi)容。
3.Overview 顯示獲取到資源的時間軸信息魂爪。
4.Requests Table 按資源獲取的前后順序顯示所有獲取到的資源信息先舷,點擊資源名可以查看該資源的詳細(xì)信息。
5.Summary 顯示總的請求數(shù)滓侍、數(shù)據(jù)傳輸量蒋川、加載時間信息。
其中 Requests Table 顯示如下信息列:
Name 資源名稱粗井,點擊名稱可以查看資源的詳情情況尔破,包括Headers
、Preview
浇衬、Response
懒构、Cookies
、Timing
耘擂。
Status HTTP狀態(tài)碼胆剧。
Type 請求的資源MIME類型。
Initiator 標(biāo)記請求是由哪個對象或進程發(fā)起的(請求源)醉冤。
Parser: 請求由Chrome的HTML解析器時發(fā)起的秩霍。
Redirect:請求是由HTTP頁面重定向發(fā)起的。
Script:請求是由Script腳本發(fā)起的蚁阳。
Other:請求是由其他進程發(fā)起的铃绒,比如用戶點擊一個鏈接跳轉(zhuǎn)到另一個頁面或者在地址欄輸入URL地址。
Size 從服務(wù)器下載的文件和請求的資源大小螺捐。如果是從緩存中取得的資源則該列會顯示(from cache)
Time 請求或下載的時間颠悬,從發(fā)起Request到獲取到Response所用的總時間矮燎。
Timeline 顯示所有網(wǎng)絡(luò)請求的可視化瀑布流(時間狀態(tài)軸),點擊時間軸赔癌,可以查看該請求的詳細(xì)信息诞外,點擊列頭則可以根據(jù)指定的字段可以排序。
捕獲屏幕
Controls
窗格包括的功能有網(wǎng)絡(luò)日志錄制灾票、日志清理峡谊、捕獲屏幕、過濾器刊苍,視圖切換既们、保留日志開關(guān)、Cache開關(guān)班缰、網(wǎng)絡(luò)連接開關(guān)贤壁、網(wǎng)速閥值。
以捕獲屏幕為例埠忘,點擊攝像機按鈕(捕獲屏幕),重新加載頁面即可捕獲屏幕馒索。
雙擊其中的截屏可以放大顯示莹妒,在放大的圖下方可以點擊跳轉(zhuǎn)到上一幀或者下一幀。
單擊則可以查看該幀被捕獲時的網(wǎng)絡(luò)請求信息绰上,并且在Overview上會有一條黃色豎線以標(biāo)記該幀被捕獲的具體時間點旨怠。
查看DOMContentLoaded和load事件信息
DOMContentLoaded
和load
這兩個事件會高亮顯示。
DOMContentLoaded事件會在頁面上DOM完全加載并解析完畢之后觸發(fā)蜈块,不會等待CSS鉴腻、圖片、子框架加載完成百揭。 load事件會在頁面上所有DOM爽哎、CSS、JS器一、圖片完全加載完畢之后觸發(fā)课锌。
DOMContentLoaded
事件在Overview上用一條藍色豎線標(biāo)記,并且在Summary以藍色文字顯示確切的時間祈秕。
load
事件同樣會在Overview和Requests Table上用一條紅色豎線標(biāo)記渺贤,在Summary也會以紅色文字顯示確切的時間。
查看具體資源的詳情
通過點擊某個資源的Name可以查看該資源的詳細(xì)信息请毛,根據(jù)選擇的資源類型顯示的信息也不太一樣志鞍,可能包括如下Tab信息:
Headers 該資源的HTTP頭信息。
Preview 根據(jù)你所選擇的資源類型(JSON方仿、圖片固棚、文本)顯示相應(yīng)的預(yù)覽统翩。
Response 顯示HTTP的Response信息。
Cookies 顯示資源HTTP的Request和Response過程中的Cookies信息玻孟。
Timing 顯示資源在整個請求生命周期過程中各部分花費的時間唆缴。
針對上面4個Tab進行詳細(xì)講解一下各個功能:
① 查看資源HTTP頭信息
在Headers標(biāo)簽里面可以看到HTTP Request URL
、HTTP Method
黍翎、Status Code
面徽、Remote Address
等基本信息和詳細(xì)的Response Headers 、Request Headers以及Query String Parameters或者Form Data等信息匣掸。
② 查看資源預(yù)覽信息
在Preview標(biāo)簽里面可根據(jù)選擇的資源類型(JSON趟紊、圖片、文本碰酝、JS霎匈、CSS)顯示相應(yīng)的預(yù)覽信息。下圖顯示的是當(dāng)選擇的資源是JSON格式時的預(yù)覽信息送爸。
③ 查看資源HTTP的Response信息
在Response標(biāo)簽里面可根據(jù)選擇的資源類型(JSON铛嘱、圖片、文本袭厂、JS墨吓、CSS)顯示相應(yīng)資源的Response響應(yīng)內(nèi)容。下圖顯示的是當(dāng)選擇的資源是CSS格式時的響應(yīng)內(nèi)容纹磺。
④ 查看資源Cookies信息
如果選擇的資源在Request和Response過程中存在Cookies信息帖烘,則Cookies標(biāo)簽會自動顯示出來,在里面可以查看所有的Cookies信息橄杨。
⑤ 分析資源在請求的生命周期內(nèi)各部分時間花費信息
在Timing標(biāo)簽中可以顯示資源在整個請求生命周期過程中各部分時間花費信息秘症,可能會涉及到如下過程的時間花費情況:
Queuing 排隊的時間花費∈浇茫可能由于該請求被渲染引擎認(rèn)為是優(yōu)先級比較低的資源(圖片)乡摹、服務(wù)器不可用、超過瀏覽器的并發(fā)請求的最大連接數(shù)(Chrome的最大并發(fā)連接數(shù)為6).
Stalled 從HTTP連接建立到請求能夠被發(fā)出送出去(真正傳輸數(shù)據(jù))之間的時間花費衷佃。包含用于處理代理的時間趟卸,如果有已經(jīng)建立好的連接,這個時間還包括等待已建立連接被復(fù)用的時間氏义。
Proxy Negotiation 與代理服務(wù)器連接的時間花費锄列。
DNS Lookup 執(zhí)行DNS查詢的時間。網(wǎng)頁上每一個新的域名都要經(jīng)過一個DNS查詢惯悠。第二次訪問瀏覽器有緩存的話邻邮,則這個時間為0。
Initial Connection / Connecting 建立連接的時間花費克婶,包含了TCP握手及重試時間筒严。
SSL 完成SSL握手的時間花費丹泉。
Request sent 發(fā)起請求的時間。
Waiting (Time to first byte (TTFB)) 是最初的網(wǎng)絡(luò)請求被發(fā)起到從服務(wù)器接收到第一個字節(jié)這段時間鸭蛙,它包含了TCP連接時間摹恨,發(fā)送HTTP請求時間和獲得響應(yīng)消息第一個字節(jié)的時間。
Content Download 獲取Response響應(yīng)數(shù)據(jù)的時間花費娶视。
TTFB這個部分的時間花費如果超過200ms晒哄,則應(yīng)該考慮對網(wǎng)絡(luò)進行性能優(yōu)化了,可以參見網(wǎng)絡(luò)性能優(yōu)化方案及里面的相關(guān)參考文檔肪获。
查看資源的發(fā)起者(請求源)和依賴項
通過按住Shift
并且把光標(biāo)移到資源名稱上寝凌,可以查看該資源是由哪個對象或進程發(fā)起的(請求源)和對該資源的請求過程中引發(fā)了哪些資源(依賴資源)。
在該資源的上方第一個標(biāo)記為綠色的資源就是該資源的發(fā)起者(請求源)孝赫,有可能會有第二個標(biāo)記為綠色的資源是該資源的發(fā)起者的發(fā)起者较木,以此類推。
在該資源的下方標(biāo)記為紅色的資源是該資源的依賴資源青柄。