作為后端開發人員，可能有很多同學不怎么了解chrome調試功能，而即將成為大神的我們，怎么也得會，知其然更要知其所以然，今天我帶領大家好好的梳理一下，chrome瀏覽器調試，個人把它分成了前端功能和后端功能，在百度上也有很多關於該功能的使用說明，而其中很多都是抄來抄去的，很多概念模糊不清，甚至錯誤的也發了出來，鄙人實在看不下去了，就來給大家講解我們PHP工程師需要用到的功能，重點在后面的TimeLine;
好了，閑話少說，首先打開chrome瀏覽器，按F12鍵進入調試模式，選擇NetWork,打開一個網頁，這里我以百度為例，請大家看看下面這張圖片
一.NetWork里面分別出現以下信息，這里我一個個給大家講講
Name and Path:請求資源的路徑和名稱
Method:請求方法：如GET,POST
Status and Text:HTTP請求狀態碼和文本信息
Type:請求的MIME類型
Initiator:發送請求的對象,主要包含Parser和Script
我們來看看上圖第二個請求資源中的Initiator一列,顯示的是www.baidu.com/:4[Parser],這里表示該css文件是從百度首頁HTML中第四行解析出來的,大家不妨查看一下網頁源代碼看看
有的資源Initiator一列為Script，表示該資源是通過某JS文件加載的，例如一些圖片
Size and Content:size是http請求中傳輸的真實大小，包括響應頭和響應體；content表示響應體解壓后的大小（如果有壓縮的話，一般為gzip壓縮），如果采用了gzip編碼傳輸，content比size大，否則content小於size
我們可以看到上圖中的第一個資源，也就是百度首頁的HTML代碼，size為32.1KB，Content為138KB，說明使用請求該資源時，服務器采用壓縮的方式傳輸資源，大小為32.1KB，我們來點擊一下這個資源看看里面的headers,看下圖，說明百度采用的是gzip方式壓縮的
經過瀏覽器解壓后真正的內容大小為138KB，這是減少服務器帶寬壓力的一種方式，這種功能Nginx和Apache都是支持的;在第一張圖片中的第8,9個資源的size為from cache,說明該資源是從緩存中讀取的；想要關閉緩存功能，將圖中的Disable cache勾上就可以;
Time and Latency:Time表示從發送請求到接收響應的最后一個字節所花的時間，即請求一個資源花的總時間，Latency表示從發送請求到接收響應的第一個字節所花的時間，即延遲；那么Time減去Latency就反應帶寬問題了，包括客戶端和服務器帶寬;在時間上chrome又多了一個TimeLine走勢圖，下面來看看時間到底花在哪里了;
TimeLine:響應時間的詳細報告(上圖),其中包括
Stalled:是瀏覽器得到要發出這個請求的指令，到請求可以發出的等待時間，一般是代理協商、以及等待可復用的TCP連接釋放的時間，不包括DNS查詢、建立TCP連接時間等;
Proxy Negotiation:與代理服務器的連接時間;
DNS LookUp:表示DNS查找時間,如果第一次訪問的是域名就需要查找,IP地址的話不需要，上圖中沒有這個參數，說明我本地緩存了百度域名的服務器地址，瀏覽器不需要查詢，直接通過IP請求服務器;
Initail Connection:建立連接的時間，包括TCP，SSL握手/重試和談判
Request sent:發送請求到服務器的傳輸時間，即上傳時間;
Waiting(TTFB):發送請求后到收到響應的第一個字節所花費的時間，TTFB（time to first bytes）;這是服務器優化的重要指標，服務器優化的目的就是減少這個時間;
Content Download:獲取響應資源時間，下載時間，即上面的Time減去Latency的時間,這是反應帶寬的重要指標
今天只是給大家講了PHP工程師需要了解的功能，關於查看headers方式我就不講了，相信很多同學都知道，下次我給大家講講前端調試功能，敬請期待哦;
以上是個人總結出來的，語文老師死得早，講的不好的地方希望大家諒解，如果大家有什么糾結的地方可以直接發消息給我，我會第一時間回復的，鄙人很樂意為大家解答，如果您對我的文章有什么建議或者意見，也歡迎提出來，再次感謝您的閱讀;