Chrome開發者工具簡介

Chrome開發者工具是Chrome瀏覽器自帶的一款開發除錯工具，可以檢視頁面元素，除錯JavaScript指令碼，網路抓包，進行網頁效能診斷等非常強大的功能，並且使用非常方便。
在在頁面上按Ctrl+Shift+I或Command+Option+I便可以快速開啟Chrome開發者工具，如圖1.2所示。

Chrome開發者工具包含9個面板，從左至右依次為Elements：元素面板，Console：JavaScript控制檯，Sources資源面板，Network：請求資訊面板，Performance：網站宣告週期性能面板，Memory記憶體佔用分佈面板，Application：本地儲存、會話管理等應用面板，Security安全驗證面板，Audits：綜合審計面板，本節重點講解用於檢視請求的Network：請求資訊面板。

Network請求資訊面板

如圖1.2，Network請求資訊面板從上到下分為工具欄、過濾器、請求列表和狀態列4個部分。

工具欄

工具欄各按鈕、選項功能說明，參見表格2.1

過濾器

過濾器是用來過濾請求的，當請求較多時，通過過濾可以快速找到我們需要的請求。
過濾器第一個是過濾框，可以通過部分字元快速匹配出請求名稱中包含該字元的請求，如輸入www.baidu可以過濾出名稱中包含www.baidu的請求。
另外，過濾器支援多種過濾語法，常用示例如下：

• domain:*.baidu.com：按域名過濾
• method:GET：按請求方法過濾
• mime-type:application/json：按資料型別過濾
• scheme:https：按協議型別過濾
• status-code:200：按狀態碼過濾
• set-cookie-doman:www.baidu.com：向www.baidu.com這個域名下設定了Cookie的請求
• set-cookie-name:sessionid：設定了名為sessionid的Cookie的請求
• has-response-header:token: 響應中包含指定請求頭項的請求
  多種過濾表示式之間可以使用And連線。
  Hide data URLs選項可以不顯示data：開頭的嵌入式小型檔案（如svg）請求。
  後面是按型別過濾，參考表格2.2
  

我們可以通過對應的型別，如XHR快速過濾出資料型別的請求。

請求表格

請求表格預設按請求時間排序，也可以點選對應的列名按指定列排序。請求表格從左到右分別為Name（資源名稱）、Status（狀態碼）、Initiator（請求源）、Size（資源大小或來自快取）、Timeline（網路請求時間軸狀態）。

注：匯出請求方法，右擊請求 -> Copy -> Copy as fetch / Copy as cUrl

狀態列

狀態列主要顯示請求總數、資料傳輸量和載入時間能資訊。其中，DOM Content Loaded為頁面上DOM完全載入並解析完畢的時間，Load為頁面上所有DOM、CSS、JS、圖片完全載入完畢的時間。

檢視請求

點選Chrome開發者工具Network面板的會話列表，檢視請求詳情，如圖2.5所示。

如上圖，General中為請求的概要資訊，Request URL是請求的URL地址，Request Method是請求方法，Status Code是響應狀態碼。下面分別是Response Headers響應頭和Request Headers請求頭等資訊。