Chrome開發者工具抓包使用簡介
接口測試工具-目錄
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請求頭等信息。

浙公網安備 33010602011771號