chrome瀏覽器調試功能以後端篇

做爲後端開發人員，可能有不少同窗不怎麼了解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方式我就不講了，相信不少同窗都知道，下次我給你們講講前端調試功能，敬請期待哦;

 

以上是我的總結出來的，語文老師死得早，講的很差的地方但願你們諒解，若是你們有什麼糾結的地方能夠直接發消息給我，我會第一時間回覆的，鄙人很樂意爲你們解答，若是您對個人文章有什麼建議或者意見，也歡迎提出來，再次感謝您的閱讀;