此文為轉(zhuǎn)載付翁，原文地址：https://www.cnblogs.com/LibraThinker/p/5981346.html
Chrome開發(fā)者工具面板
面板上包含了Elements面板碉钠、Console面板、Sources面板、Network面板粘舟、
Timeline面板宫盔、Profiles面板、Application面板眉睹、Security面板荔茬、Audits面板這些功能面板。
這些按鈕的功能點(diǎn)如下：
Elements:查找網(wǎng)頁源代碼HTML中的任一元素,手動(dòng)修改任一元素的屬性和樣式且能實(shí)時(shí)在瀏覽器里面得到反饋辣往。
Console:記錄開發(fā)者開發(fā)過程中的日志信息兔院，且可以作為與JS進(jìn)行交互的命令行Shell。
Sources:斷點(diǎn)調(diào)試JS站削。
Network:從發(fā)起網(wǎng)頁頁面請(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ù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)頁是否安全。
Audits:對(duì)當(dāng)前網(wǎng)頁進(jìn)行網(wǎng)絡(luò)利用情況尖奔、網(wǎng)頁性能方面的診斷幻馁，并給出一些優(yōu)化建議洗鸵。比如列出所有沒有用到的CSS文件等。
Network面板
概述
Network面板可以記錄頁面上的網(wǎng)絡(luò)請(qǐng)求的詳情信息仗嗦，從發(fā)起網(wǎng)頁頁面請(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頁面重定向發(fā)起的勾徽。
Script：請(qǐng)求是由Script腳本發(fā)起的。
Other：請(qǐng)求是由其他進(jìn)程發(fā)起的统扳，比如用戶點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)到另一個(gè)頁面或者在地址欄輸入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ān)供屉、Cache開關(guān)、網(wǎng)絡(luò)連接開關(guān)溺蕉、網(wǎng)速閥值伶丐。
以捕獲屏幕為例，點(diǎn)擊攝像機(jī)按鈕（捕獲屏幕）疯特，重新加載頁面即可捕獲屏幕哗魂。
雙擊其中的截屏可以放大顯示，在放大的圖下方可以點(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ì)在頁面上DOM完全加載并解析完畢之后觸發(fā)庶灿，不會(huì)等待CSS、圖片吃衅、子框架加載完成往踢。
load事件會(huì)在頁面上所有DOM、CSS徘层、JS峻呕、圖片完全加載完畢之后觸發(fā)。
DOMContentLoaded事件在Overview上用一條藍(lán)色豎線標(biāo)記趣效，并且在Summary以藍(lán)色文字顯示確切的時(shí)間瘦癌。
load事件同樣會(huì)在Overview和Requests Table上用一條紅色豎線標(biāo)記，在Summary也會(huì)以紅色文字顯示確切的時(shí)間跷敬。
查看具體資源的詳情
通過點(diǎn)擊某個(gè)資源的Name可以查看該資源的詳細(xì)信息讯私，根據(jù)選擇的資源類型顯示的信息也不太一樣，可能包括如下Tab信息：
Headers?該資源的HTTP頭信息西傀。
Preview?根據(jù)你所選擇的資源類型（JSON斤寇、圖片、文本）顯示相應(yīng)的預(yù)覽拥褂。
Response?顯示HTTP的Response信息娘锁。
Cookies?顯示資源HTTP的Request和Response過程中的Cookies信息。
Timing?顯示資源在整個(gè)請(qǐng)求生命周期過程中各部分花費(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過程中存在Cookies信息，則Cookies標(biāo)簽會(huì)自動(dòng)顯示出來砸狞，在里面可以查看所有的Cookies信息捻勉。
⑤?分析資源在請(qǐng)求的生命周期內(nèi)各部分時(shí)間花費(fèi)信息
在Timing標(biāo)簽中可以顯示資源在整個(gè)請(qǐng)求生命周期過程中各部分時(shí)間花費(fèi)信息，可能會(huì)涉及到如下過程的時(shí)間花費(fèi)情況：
Queuing?排隊(duì)的時(shí)間花費(fèi)刀森□馄簦可能由于該請(qǐng)求被渲染引擎認(rèn)為是優(yōu)先級(jí)比較低的資源（圖片）、服務(wù)器不可用研底、超過瀏覽器的并發(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)頁上每一個(gè)新的域名都要經(jīng)過一個(gè)DNS查詢抖剿。第二次訪問瀏覽器有緩存的話，則這個(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)如果超過200ms窿侈，則應(yīng)該考慮對(duì)網(wǎng)絡(luò)進(jìn)行性能優(yōu)化了炼幔，可以參見網(wǎng)絡(luò)性能優(yōu)化方案及里面的相關(guān)參考文檔。
查看資源的發(fā)起者(請(qǐng)求源)和依賴項(xiàng)
通過按住Shift并且把光標(biāo)移到資源名稱上史简，可以查看該資源是由哪個(gè)對(duì)象或進(jìn)程發(fā)起的（請(qǐng)求源）和對(duì)該資源的請(qǐng)求過程中引發(fā)了哪些資源（依賴資源）乃秀。
在該資源的上方第一個(gè)標(biāo)記為綠色的資源就是該資源的發(fā)起者（請(qǐng)求源），有可能會(huì)有第二個(gè)標(biāo)記為綠色的資源是該資源的發(fā)起者的發(fā)起者圆兵，以此類推跺讯。
在該資源的下方標(biāo)記為紅色的資源是該資源的依賴資源。
