谷歌開發者工具詳解 Network篇

原文連接：https://segmentfault.com/a/1190000010302235 

開發者工具初步介紹

在利用chrome瀏覽器進行web端測試，咱們能夠經過F12鍵調起開發者工具。

chrome開發者工具最經常使用的四個功能模塊：

• Elements：主要用來查看前面界面的html的Dom結構，和修改css的樣式。css能夠即時修改，即便顯示。大大方便了開發者調試頁面，這真是十分友好的~

• console：這個除了查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本之外，還能夠看成Javascript API查看用。例如我想查看console都有哪些方法和屬性，我能夠直接在Console中輸入"console"並執行~

• Sources：主要用來調試js和查看源代碼

• Network：

 

Network詳細介紹

 

 那我就按照從左到右的順序來寫啦~

• 記錄按鈕 處於打開狀態時會在此面板進行網絡鏈接的信息記錄，關閉後則不會記錄。

• 清除按鈕 清除當前的網絡鏈接記錄信息。（點擊一下就能清空）

• 捕獲截屏 記錄頁面加載過程當中一些時間點的頁面渲染狀況，截圖根據可視窗口截取，以下圖所示。

 

過濾器 可以自定義篩選條件，找到本身想要資源信息，以下圖所示。

 

也能夠是一些指定條件
指定條件有哪些？

domain：資源所在的域，即url中的域名部分。如 domain:api.github.com

has-response-header：資源是否存在響應頭，不管其值是什麼。如 has-response-header：Access-Control-Allow-Origin

is：當前時間點在執行的請求。當前可用值：running

larger-than：顯示大於指定值大小規格的資源。單位是字節(B),可是K(kB)和M(MB)也是能夠的~ 如larger-than:150K

method：使用何種HTTP請求方式。如 GET

mime-type：也寫做content-type，是資源類型的標識符。如 text/html

scheme：協議規定。如 HTTPS

set-cookie-name：服務器設置的cookies名稱

set-cookie-value：服務器設置的cookies的值

set-cookie-domain：服務器設置的cookies的域

status-code：HTTP響應頭的狀態碼

• 顯示詳細信息

 

顯示時間流

 

• 是否保留日誌 
  當選擇保留日誌，從新加載url當前界面時，以前請求顯示的資源信息，會保留下來，不會清空的喲~

• 是否進行緩存

  當打開開發者工具時生效，打開這個開關，則頁面資源不會存入緩存，能夠從Status欄的狀態碼看文件請求狀態。

• 設置模擬限速，以下圖所示。
  

  設置限速能夠模擬處於各類網絡環境下的不一樣用戶訪問本頁面的狀況。

Network主題內容介紹

下列介紹中，前者爲名詞解釋，後者爲舉例

• Name/Pat：資源名稱以及URL路徑 （main.css）

• Method：Http請求方法 (GET或者POST)

• status/Text：Http狀態碼/文字解釋 （200，ok）

• Type ：請求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)

• Initiator：解釋請求是怎麼發起的，有四種可能的值

  1.Parser ：請求是由頁面的html解析時發送 2.Redirect：請求是由頁面重定向發送 3.script ：請求是由script腳本處理髮送 4.other ：請求是由其餘過程發送的，好比頁面裏的Link連接點擊 

• size/content：size是響應頭部和響應體結合的大小，content是請求解碼後的大小

請求文件具體說明

點擊某個具體請求後的界面，以下圖所示：

 

 

一共分爲四個模塊：

• Headers

 

Header面板列出資源的請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等等

• Preview：預覽面板，用於資源的預覽。

Response：響應信息面板包含資源還未進行格式處理的內容

 

Timing：資源請求的詳細信息花費時間

 

細節補充

對某請求右鍵，出現頁面以下圖所示。

 

 

 

• Copy Request Headers：複製HTTP請求頭到系統剪貼板

• Copy Response Headers：複製HTTP響應頭到系統剪貼板

• Copy Response：複製HTTP響應內容到系統剪貼板

• Copy as
  cURL：將網絡請求做爲一個curl的命令字符複製到系統剪貼板(curl是一種開源的命令行工具和庫，用於配合url語法進行數據傳輸)

• Copy All as HAR：將網絡請求記錄信息以HAR格式複製到系統剪貼板(what is HAR file)

• Save as HAR with Content：將資源的全部的網絡信息保存到HAR文件中(.har文件)

• Clear Browser Cache：清除瀏覽器緩存

• Clear Browser Cookies：清除瀏覽器cookies

• Open in Sources Panel：當前選中資源在Sources面板打開

• Open Link in New Tab：在新tab打開資源連接

• Copy Link Address：複製資源url到系統剪貼板