開發者工具初步介紹

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. 1.Parser ：請求是由頁面的html解析時傳送

  2. 2.Redirect：請求是由頁面重定向傳送

  3. 3.script ：請求是由script指令碼處理髮送

  4. 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到系統剪貼簿