Chrome F12 介紹
Chrome 開發者工具 F12 是前端開發、測試人員的利器,使用開發者工具可以非常方便地查看頁面元素、源文件、控制臺、網絡等等。
其中的 Network 類似與 fiddler 抓包工具,能夠獲取請求、響應、緩存等等內容。
接下來介紹下 Network,來吧。
界面介紹
1,界面總覽
2,記錄請求
開啟按鈕時記錄所有請求,關閉按鈕時不會記錄
3,清除請求
清除按鈕,清除所有記錄的請求
4,過濾請求
過濾器,能夠自定義篩選條件,也可以選擇預定義的過濾方式
- 自定義條件
- 預定義的過濾
ALL:顯示所有請求
XHR:顯示AJAX異步請求
JS:顯示js文件
css:顯示css文件
Img:顯示圖片
Media:顯示媒體文件,音頻、視頻等
Font:顯示Web字體
Doc:顯示html
WS:顯示websocket請求
Other:顯示其他請求
5,保留請求記錄
勾選之后,刷新頁面不會清空之前的請求記錄,下面是連續刷新兩次頁面結果
6,是否進行緩存
當打開開發者工具時生效,打開這個開關,則頁面資源不會存入緩存,可以從 Status 欄的狀態碼看文件請求狀態。
7,弱網設置
設置模擬限速,如下圖所示。
8,網絡設置
caching:緩存設置
Network throttling :弱網設置
User agent:屬于 http 請求頭一部分。表示所用瀏覽器類型及版本、操作系統及版本、瀏覽器內核、等信息的標識。
Accepted Content-Encodings:服務端壓縮格式
9,右鍵界面
Open in new tab:在新的標簽中打開鏈接
Clear browser cache:清空瀏覽器緩存
Clear browser cookies:清空瀏覽器cookies
Copy:復制
Block request URL:攔截當前請求url
Block request domian:攔截當前域名下所有請求
Replay XHR:重新請求AJAX
Sort By:排序請求
Header Options:顯示請求頭選項
Save all as HAR with content:保存所有請求為.har文件
10,copy
Copy Link Address:復制資源url到系統剪貼板
Copy Response:復制HTTP響應
Copy stack trace:復制堆棧信息
Copy as PowerShell:復制請求PwoerShell代碼
Copy as fetch:復制請求fetch代碼
Copy as Node.js fetch:復制請求Node.js fetch代碼
Copy as cUrl(cmd):復制請求cUrl 命令代碼
Copy as cUrl(bash):復制請求cUrl 命令代碼
Copy all as PowerShell:復制所有請求PwoerShell代碼
Copy all as fetch:復制所有請求fetch代碼
Copy all as Node.js fetch:復制所有請求Node.js fetch代碼
Copy all as cUrl(cmd):復制所有請求cUrl 命令代碼
Copy all as cUrl(bash):復制所有請求cUrl 命令代碼
Copy All as HAR:復制所有請求HAR文件