Chrome 開發(fā)者工具詳解(2):Network 面板

【轉(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
事件同樣會在OverviewRequests 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 HeadersRequest 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)記為紅色的資源是該資源的依賴資源青柄。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末伐债,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子致开,更是在濱河造成了極大的恐慌泳赋,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,839評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件喇喉,死亡現(xiàn)場離奇詭異,居然都是意外死亡校坑,警方通過查閱死者的電腦和手機拣技,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,543評論 2 382
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來耍目,“玉大人膏斤,你說我怎么就攤上這事⌒巴裕” “怎么了莫辨?”我有些...
    開封第一講書人閱讀 153,116評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長毅访。 經(jīng)常有香客問我沮榜,道長,這世上最難降的妖魔是什么喻粹? 我笑而不...
    開封第一講書人閱讀 55,371評論 1 279
  • 正文 為了忘掉前任蟆融,我火速辦了婚禮,結(jié)果婚禮上守呜,老公的妹妹穿的比我還像新娘。我一直安慰自己椎例,他們只是感情好拾给,可當(dāng)我...
    茶點故事閱讀 64,384評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著郁竟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪由境。 梳的紋絲不亂的頭發(fā)上棚亩,一...
    開封第一講書人閱讀 49,111評論 1 285
  • 那天,我揣著相機與錄音藻肄,去河邊找鬼蔑舞。 笑死,一個胖子當(dāng)著我的面吹牛嘹屯,可吹牛的內(nèi)容都是我干的攻询。 我是一名探鬼主播,決...
    沈念sama閱讀 38,416評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼州弟,長吁一口氣:“原來是場噩夢啊……” “哼钧栖!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起婆翔,我...
    開封第一講書人閱讀 37,053評論 0 259
  • 序言:老撾萬榮一對情侶失蹤拯杠,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后啃奴,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體潭陪,經(jīng)...
    沈念sama閱讀 43,558評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,007評論 2 325
  • 正文 我和宋清朗相戀三年最蕾,在試婚紗的時候發(fā)現(xiàn)自己被綠了依溯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,117評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡瘟则,死狀恐怖黎炉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情醋拧,我是刑警寧澤慷嗜,帶...
    沈念sama閱讀 33,756評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站丹壕,受9級特大地震影響庆械,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜雀费,卻給世界環(huán)境...
    茶點故事閱讀 39,324評論 3 307
  • 文/蒙蒙 一干奢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧盏袄,春花似錦忿峻、人聲如沸薄啥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,315評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽垄惧。三九已至,卻和暖如春绰寞,著一層夾襖步出監(jiān)牢的瞬間到逊,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,539評論 1 262
  • 我被黑心中介騙來泰國打工滤钱, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留觉壶,地道東北人。 一個月前我還...
    沈念sama閱讀 45,578評論 2 355
  • 正文 我出身青樓件缸,卻偏偏與公主長得像铜靶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子他炊,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,877評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Chrome開發(fā)者工具詳解(2)-Network面板 注: 這一篇主要講解面板Network争剿,參考了Google的...
    CharlieChu閱讀 1,011評論 0 2
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)痊末,斷路器蚕苇,智...
    卡卡羅2017閱讀 134,600評論 18 139
  • 一、概念(載錄于:http://www.cnblogs.com/EricaMIN1987_IT/p/3837436...
    yuantao123434閱讀 8,330評論 6 152
  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 10,869評論 6 13
  • 今天我很早的就寫完了作業(yè)凿叠, 然后出去請爺爺吃飯涩笤,我們吃的可高興啦!菜里面又好吃又香盒件。真是好吃的一頓飯傲舅!
    家琦雅涵閱讀 132評論 0 0