原文鏈接：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到系統剪貼板

谷歌開發者工具詳解 Network篇