此文為轉載，原文地址：https://www.cnblogs.com/LibraThinker/p/5981346.html
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)絡性能優(yōu)化。
Timeline:記錄并分析在網(wǎng)站的生命周期內(nèi)所發(fā)生的各類事件，以此可以提高網(wǎng)頁的運行時間的性能。
Profiles:如果你需要Timeline所能提供的更多信息時，可以嘗試一下Profiles,比如記錄JS CPU執(zhí)行時間細節(jié)、顯示JS對象和相關的DOM節(jié)點的內(nèi)存消耗、記錄內(nèi)存的分配細節(jié)。
Application:記錄網(wǎng)站加載的所有資源信息，包括存儲數(shù)據(jù)（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、緩存數(shù)據(jù)、字體、圖片、腳本、樣式表等。
Security:判斷當前網(wǎng)頁是否安全。
Audits:對當前網(wǎng)頁進行網(wǎng)絡利用情況、網(wǎng)頁性能方面的診斷，并給出一些優(yōu)化建議。比如列出所有沒有用到的CSS文件等。
Network面板
概述
Network面板可以記錄頁面上的網(wǎng)絡請求的詳情信息，從發(fā)起網(wǎng)頁頁面請求Request后分析HTTP請求后得到的各個請求資源信息（包括狀態(tài)、資源類型、大小、所用時間、Request和Response等），可以根據(jù)這個進行網(wǎng)絡性能優(yōu)化。
我把Google官方網(wǎng)站上介紹Network面板的圖貼到這里，該面板主要包括5大塊窗格(Pane)：
Controls?控制Network的外觀和功能。
Filters?控制Requests Table具體顯示哪些內(nèi)容。
Overview?顯示獲取到資源的時間軸信息。
Requests Table?按資源獲取的前后順序顯示所有獲取到的資源信息，點擊資源名可以查看該資源的詳細信息。
Summary?顯示總的請求數(shù)、數(shù)據(jù)傳輸量、加載時間信息。
其中?Requests Table?顯示如下信息列：
Name?資源名稱，點擊名稱可以查看資源的詳情情況，包括Headers、Preview、Response、Cookies、Timing。
Status?HTTP狀態(tài)碼。
Type?請求的資源MIME類型。
Initiator?標記請求是由哪個對象或進程發(fā)起的（請求源）。
Parser： 請求由Chrome的HTML解析器時發(fā)起的。
Redirect：請求是由HTTP頁面重定向發(fā)起的。
Script：請求是由Script腳本發(fā)起的。
Other：請求是由其他進程發(fā)起的，比如用戶點擊一個鏈接跳轉到另一個頁面或者在地址欄輸入URL地址。
Size?從服務器下載的文件和請求的資源大小。如果是從緩存中取得的資源則該列會顯示(from cache)
Time?請求或下載的時間，從發(fā)起Request到獲取到Response所用的總時間。
Timeline?顯示所有網(wǎng)絡請求的可視化瀑布流(時間狀態(tài)軸)，點擊時間軸，可以查看該請求的詳細信息，點擊列頭則可以根據(jù)指定的字段可以排序。
捕獲屏幕
Controls窗格包括的功能有網(wǎng)絡日志錄制、日志清理、捕獲屏幕、過濾器，視圖切換、保留日志開關、Cache開關、網(wǎng)絡連接開關、網(wǎng)速閥值。
以捕獲屏幕為例，點擊攝像機按鈕（捕獲屏幕），重新加載頁面即可捕獲屏幕。
雙擊其中的截屏可以放大顯示，在放大的圖下方可以點擊跳轉到上一幀或者下一幀。
單擊則可以查看該幀被捕獲時的網(wǎng)絡請求信息，并且在Overview上會有一條黃色豎線以標記該幀被捕獲的具體時間點。
查看DOMContentLoaded和load事件信息
DOMContentLoaded和load這兩個事件會高亮顯示。
DOMContentLoaded事件會在頁面上DOM完全加載并解析完畢之后觸發(fā)，不會等待CSS、圖片、子框架加載完成。
load事件會在頁面上所有DOM、CSS、JS、圖片完全加載完畢之后觸發(fā)。
DOMContentLoaded事件在Overview上用一條藍色豎線標記，并且在Summary以藍色文字顯示確切的時間。
load事件同樣會在Overview和Requests Table上用一條紅色豎線標記，在Summary也會以紅色文字顯示確切的時間。
查看具體資源的詳情
通過點擊某個資源的Name可以查看該資源的詳細信息，根據(jù)選擇的資源類型顯示的信息也不太一樣，可能包括如下Tab信息：
Headers?該資源的HTTP頭信息。
Preview?根據(jù)你所選擇的資源類型（JSON、圖片、文本）顯示相應的預覽。
Response?顯示HTTP的Response信息。
Cookies?顯示資源HTTP的Request和Response過程中的Cookies信息。
Timing?顯示資源在整個請求生命周期過程中各部分花費的時間。
針對上面4個Tab進行詳細講解一下各個功能：
①?查看資源HTTP頭信息
在Headers標簽里面可以看到HTTP?Request URL、HTTP Method、Status Code、Remote Address等基本信息和詳細的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。
②?查看資源預覽信息
在Preview標簽里面可根據(jù)選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應的預覽信息。下圖顯示的是當選擇的資源是JSON格式時的預覽信息。
③?查看資源HTTP的Response信息
在Response標簽里面可根據(jù)選擇的資源類型（JSON、圖片、文本、JS、CSS）顯示相應資源的Response響應內(nèi)容。下圖顯示的是當選擇的資源是CSS格式時的響應內(nèi)容。
④?查看資源Cookies信息
如果選擇的資源在Request和Response過程中存在Cookies信息，則Cookies標簽會自動顯示出來，在里面可以查看所有的Cookies信息。
⑤?分析資源在請求的生命周期內(nèi)各部分時間花費信息
在Timing標簽中可以顯示資源在整個請求生命周期過程中各部分時間花費信息，可能會涉及到如下過程的時間花費情況：
Queuing?排隊的時間花費。可能由于該請求被渲染引擎認為是優(yōu)先級比較低的資源（圖片）、服務器不可用、超過瀏覽器的并發(fā)請求的最大連接數(shù)（Chrome的最大并發(fā)連接數(shù)為6）.
Stalled?從HTTP連接建立到請求能夠被發(fā)出送出去(真正傳輸數(shù)據(jù))之間的時間花費。包含用于處理代理的時間，如果有已經(jīng)建立好的連接，這個時間還包括等待已建立連接被復用的時間。
Proxy Negotiation?與代理服務器連接的時間花費。
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)絡請求被發(fā)起到從服務器接收到第一個字節(jié)這段時間，它包含了TCP連接時間，發(fā)送HTTP請求時間和獲得響應消息第一個字節(jié)的時間。
Content Download?獲取Response響應數(shù)據(jù)的時間花費。
TTFB這個部分的時間花費如果超過200ms，則應該考慮對網(wǎng)絡進行性能優(yōu)化了，可以參見網(wǎng)絡性能優(yōu)化方案及里面的相關參考文檔。
查看資源的發(fā)起者(請求源)和依賴項
通過按住Shift并且把光標移到資源名稱上，可以查看該資源是由哪個對象或進程發(fā)起的（請求源）和對該資源的請求過程中引發(fā)了哪些資源（依賴資源）。
在該資源的上方第一個標記為綠色的資源就是該資源的發(fā)起者（請求源），有可能會有第二個標記為綠色的資源是該資源的發(fā)起者的發(fā)起者，以此類推。
在該資源的下方標記為紅色的資源是該資源的依賴資源。
