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請求頭等信息。