Chrome開(kāi)發(fā)者工具詳解(2)-Network面板
注： 這一篇主要講解面板Network畦浓，參考了Google的相關(guān)文檔蜜猾，主要用于公司內(nèi)部技術(shù)分享傀蚌。
Chrome開(kāi)發(fā)者工具面板
面板上包含了Elements面板浩姥、Console面板散罕、Sources面板分歇、Network面板、
Timeline面板欧漱、Profiles面板职抡、Application面板、Security面板误甚、Audits面板這些功能面板缚甩。
這些按鈕的功能點(diǎn)如下：
- Elements:查找網(wǎng)頁(yè)源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋。
- Console:記錄開(kāi)發(fā)者開(kāi)發(fā)過(guò)程中的日志信息窑邦，且可以作為與JS進(jìn)行交互的命令行Shell擅威。
- Sources:斷點(diǎn)調(diào)試JS。
- Network:從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)冈钦、資源類型郊丛、大小、所用時(shí)間等）瞧筛，可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化厉熟。
- Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件，以此可以提高網(wǎng)頁(yè)的運(yùn)行時(shí)間的性能驾窟。
- Profiles:如果你需要Timeline所能提供的更多信息時(shí)庆猫，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時(shí)間細(xì)節(jié)、顯示JS對(duì)象和相關(guān)的DOM節(jié)點(diǎn)的內(nèi)存消耗绅络、記錄內(nèi)存的分配細(xì)節(jié)月培。
- Application:?記錄網(wǎng)站加載的所有資源信息，包括存儲(chǔ)數(shù)據(jù)（Local Storage恩急、Session Storage杉畜、IndexedDB、Web SQL衷恭、Cookies）此叠、緩存數(shù)據(jù)、字體随珠、圖片灭袁、腳本猬错、樣式表等。
- Security:判斷當(dāng)前網(wǎng)頁(yè)是否安全茸歧。
- Audits:對(duì)當(dāng)前網(wǎng)頁(yè)進(jìn)行網(wǎng)絡(luò)利用情況倦炒、網(wǎng)頁(yè)性能方面的診斷，并給出一些優(yōu)化建議软瞎。比如列出所有沒(méi)有用到的CSS文件等逢唤。
Network面板
概述
Network面板可以記錄頁(yè)面上的網(wǎng)絡(luò)請(qǐng)求的詳情信息，從發(fā)起網(wǎng)頁(yè)頁(yè)面請(qǐng)求Request后分析HTTP請(qǐng)求后得到的各個(gè)請(qǐng)求資源信息（包括狀態(tài)涤浇、資源類型鳖藕、大小、所用時(shí)間只锭、Request和Response等）著恩，可以根據(jù)這個(gè)進(jìn)行網(wǎng)絡(luò)性能優(yōu)化。
我把Google官方網(wǎng)站上介紹Network面板的圖貼到這里纹烹，該面板主要包括5大塊窗格(Pane)：
- Controls 控制Network的外觀和功能页滚。
- Filters 控制Requests Table具體顯示哪些內(nèi)容。
- Overview 顯示獲取到資源的時(shí)間軸信息铺呵。
- Requests Table 按資源獲取的前后順序顯示所有獲取到的資源信息裹驰，點(diǎn)擊資源名可以查看該資源的詳細(xì)信息。
- Summary 顯示總的請(qǐng)求數(shù)片挂、數(shù)據(jù)傳輸量幻林、加載時(shí)間信息。
其中 Requests Table 顯示如下信息列：
-
Name 資源名稱音念，點(diǎn)擊名稱可以查看資源的詳情情況沪饺，包括
Headers、Preview闷愤、Response整葡、Cookies、Timing讥脐。 - Status HTTP狀態(tài)碼遭居。
- Type 請(qǐng)求的資源MIME類型。
-
Initiator 標(biāo)記請(qǐng)求是由哪個(gè)對(duì)象或進(jìn)程發(fā)起的（請(qǐng)求源）旬渠。
- Parser： 請(qǐng)求由Chrome的HTML解析器時(shí)發(fā)起的俱萍。
- Redirect：請(qǐng)求是由HTTP頁(yè)面重定向發(fā)起的。
- Script：請(qǐng)求是由Script腳本發(fā)起的告丢。
- Other：請(qǐng)求是由其他進(jìn)程發(fā)起的枪蘑，比如用戶點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面或者在地址欄輸入U(xiǎn)RL地址。
- Size 從服務(wù)器下載的文件和請(qǐng)求的資源大小。如果是從緩存中取得的資源則該列會(huì)顯示(from cache)
- Time 請(qǐng)求或下載的時(shí)間岳颇，從發(fā)起Request到獲取到Response所用的總時(shí)間照捡。
- Timeline ?顯示所有網(wǎng)絡(luò)請(qǐng)求的?可視化瀑布流(時(shí)間狀態(tài)軸)，點(diǎn)擊時(shí)間軸赦役，可以查看該請(qǐng)求的詳細(xì)信息麻敌，點(diǎn)擊列頭則可以根據(jù)指定的字段可以排序。
捕獲屏幕
Controls窗格包括的功能有網(wǎng)絡(luò)日志錄制掂摔、日志清理、捕獲屏幕赢赊、過(guò)濾器乙漓，視圖切換、保留日志開(kāi)關(guān)释移、Cache開(kāi)關(guān)叭披、網(wǎng)絡(luò)連接開(kāi)關(guān)、網(wǎng)速閥值玩讳。
以捕獲屏幕為例涩蜘，點(diǎn)擊攝像機(jī)按鈕（捕獲屏幕），重新加載頁(yè)面即可捕獲屏幕熏纯。
雙擊其中的截屏可以放大顯示同诫，在放大的圖下方可以點(diǎn)擊跳轉(zhuǎn)到上一幀或者下一幀。
單擊則可以查看該幀被捕獲時(shí)的網(wǎng)絡(luò)請(qǐng)求信息樟澜，并且在Overview上會(huì)有一條黃色豎線以標(biāo)記該幀被捕獲的具體時(shí)間點(diǎn)误窖。
查看DOMContentLoaded和load事件信息
DOMContentLoaded和load這兩個(gè)事件會(huì)高亮顯示。
DOMContentLoaded事件會(huì)在頁(yè)面上DOM完全加載并解析完畢之后觸發(fā)秩贰，不會(huì)等待CSS霹俺、圖片、子框架加載完成毒费。
load事件會(huì)在頁(yè)面上所有DOM丙唧、CSS、JS觅玻、圖片完全加載完畢之后觸發(fā)想际。
DOMContentLoaded事件在Overview上用一條藍(lán)色豎線標(biāo)記，并且在Summary以藍(lán)色文字顯示確切的時(shí)間串塑。
load事件同樣會(huì)在Overview和Requests Table上用一條紅色豎線標(biāo)記沼琉，在Summary也會(huì)以紅色文字顯示確切的時(shí)間。
查看具體資源的詳情
通過(guò)點(diǎn)擊某個(gè)資源的Name可以查看該資源的詳細(xì)信息桩匪，根據(jù)選擇的資源類型顯示的信息也不太一樣打瘪，可能包括如下Tab信息：
- Headers 該資源的HTTP頭信息。
- Preview 根據(jù)你所選擇的資源類型（JSON、圖片闺骚、文本）顯示相應(yīng)的預(yù)覽彩扔。
- Response 顯示HTTP的Response信息。
- Cookies 顯示資源HTTP的Request和Response過(guò)程中的Cookies信息僻爽。
- Timing 顯示資源在整個(gè)請(qǐng)求生命周期過(guò)程中各部分花費(fèi)的時(shí)間虫碉。
針對(duì)上面4個(gè)Tab進(jìn)行詳細(xì)講解一下各個(gè)功能：
① 查看資源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格式時(shí)的預(yù)覽信息柠横。
③ 查看資源HTTP的Response信息
在Response標(biāo)簽里面可根據(jù)選擇的資源類型（JSON窃款、圖片、文本牍氛、JS晨继、CSS）顯示相應(yīng)資源的Response響應(yīng)內(nèi)容。下圖顯示的是當(dāng)選擇的資源是CSS格式時(shí)的響應(yīng)內(nèi)容糜俗。
④ 查看資源Cookies信息
如果選擇的資源在Request和Response過(guò)程中存在Cookies信息踱稍，則Cookies標(biāo)簽會(huì)自動(dòng)顯示出來(lái)，在里面可以查看所有的Cookies信息悠抹。
⑤ 分析資源在請(qǐng)求的生命周期內(nèi)各部分時(shí)間花費(fèi)信息
在Timing標(biāo)簽中可以顯示資源在整個(gè)請(qǐng)求生命周期過(guò)程中各部分時(shí)間花費(fèi)信息珠月，可能會(huì)涉及到如下過(guò)程的時(shí)間花費(fèi)情況：
- Queuing 排隊(duì)的時(shí)間花費(fèi)⌒ǖ校可能由于該請(qǐng)求被渲染引擎認(rèn)為是優(yōu)先級(jí)比較低的資源（圖片）啤挎、服務(wù)器不可用、超過(guò)瀏覽器的并發(fā)請(qǐng)求的最大連接數(shù)（Chrome的最大并發(fā)連接數(shù)為6）.
- Stalled 從HTTP連接建立到請(qǐng)求能夠被發(fā)出送出去(真正傳輸數(shù)據(jù))之間的時(shí)間花費(fèi)卵凑。包含用于處理代理的時(shí)間庆聘，如果有已經(jīng)建立好的連接，這個(gè)時(shí)間還包括等待已建立連接被復(fù)用的時(shí)間勺卢。
- Proxy Negotiation 與代理服務(wù)器連接的時(shí)間花費(fèi)伙判。
- DNS Lookup 執(zhí)行DNS查詢的時(shí)間。網(wǎng)頁(yè)上每一個(gè)新的域名都要經(jīng)過(guò)一個(gè)DNS查詢黑忱。第二次訪問(wèn)瀏覽器有緩存的話宴抚，則這個(gè)時(shí)間為0勒魔。
- Initial Connection / Connecting 建立連接的時(shí)間花費(fèi)，包含了TCP握手及重試時(shí)間菇曲。
- SSL 完成SSL握手的時(shí)間花費(fèi)冠绢。
- Request sent 發(fā)起請(qǐng)求的時(shí)間。
- Waiting (Time to first byte (TTFB)) 是最初的網(wǎng)絡(luò)請(qǐng)求被發(fā)起到從服務(wù)器接收到第一個(gè)字節(jié)這段時(shí)間常潮，它包含了TCP連接時(shí)間弟胀，發(fā)送HTTP請(qǐng)求時(shí)間和獲得響應(yīng)消息第一個(gè)字節(jié)的時(shí)間。
- Content Download 獲取Response響應(yīng)數(shù)據(jù)的時(shí)間花費(fèi)喊式。
TTFB這個(gè)部分的時(shí)間花費(fèi)如果超過(guò)200ms孵户，則應(yīng)該考慮對(duì)網(wǎng)絡(luò)進(jìn)行性能優(yōu)化了，可以參見(jiàn)網(wǎng)絡(luò)性能優(yōu)化方案及里面的相關(guān)參考文檔垃帅。
查看資源的發(fā)起者(請(qǐng)求源)和依賴項(xiàng)
通過(guò)按住Shift并且把光標(biāo)移到資源名稱上延届，可以查看該資源是由哪個(gè)對(duì)象或進(jìn)程發(fā)起的（請(qǐng)求源）和對(duì)該資源的請(qǐng)求過(guò)程中引發(fā)了哪些資源（依賴資源）。
在該資源的上方第一個(gè)標(biāo)記為綠色的資源就是該資源的發(fā)起者（請(qǐng)求源）贸诚，有可能會(huì)有第二個(gè)標(biāo)記為綠色的資源是該資源的發(fā)起者的發(fā)起者，以此類推厕吉。
在該資源的下方標(biāo)記為紅色的資源是該資源的依賴資源酱固。
