Chrome F12 介紹
Chrome 開(kāi)發(fā)者工具 F12 是前端開(kāi)發(fā)、測(cè)試人員的利器,使用開(kāi)發(fā)者工具可以非常方便地查看頁(yè)面元素、源文件、控制臺(tái)、網(wǎng)絡(luò)等等。
其中的 Network 類(lèi)似與 fiddler 抓包工具,能夠獲取請(qǐng)求、響應(yīng)、緩存等等內(nèi)容。
接下來(lái)介紹下 Network,來(lái)吧。
界面介紹
1,界面總覽

2,記錄請(qǐng)求
開(kāi)啟按鈕時(shí)記錄所有請(qǐng)求,關(guān)閉按鈕時(shí)不會(huì)記錄

3,清除請(qǐng)求
清除按鈕,清除所有記錄的請(qǐng)求
4,過(guò)濾請(qǐng)求
過(guò)濾器,能夠自定義篩選條件,也可以選擇預(yù)定義的過(guò)濾方式
- 自定義條件

- 預(yù)定義的過(guò)濾

ALL:顯示所有請(qǐng)求
XHR:顯示AJAX異步請(qǐng)求
JS:顯示js文件
css:顯示css文件
Img:顯示圖片
Media:顯示媒體文件,音頻、視頻等
Font:顯示W(wǎng)eb字體
Doc:顯示html
WS:顯示websocket請(qǐng)求
Other:顯示其他請(qǐng)求
5,保留請(qǐng)求記錄
勾選之后,刷新頁(yè)面不會(huì)清空之前的請(qǐng)求記錄,下面是連續(xù)刷新兩次頁(yè)面結(jié)果


6,是否進(jìn)行緩存
當(dāng)打開(kāi)開(kāi)發(fā)者工具時(shí)生效,打開(kāi)這個(gè)開(kāi)關(guān),則頁(yè)面資源不會(huì)存入緩存,可以從 Status 欄的狀態(tài)碼看文件請(qǐng)求狀態(tài)。
7,弱網(wǎng)設(shè)置
設(shè)置模擬限速,如下圖所示。

8,網(wǎng)絡(luò)設(shè)置
caching:緩存設(shè)置
Network throttling :弱網(wǎng)設(shè)置
User agent:屬于 http 請(qǐng)求頭一部分。表示所用瀏覽器類(lèi)型及版本、操作系統(tǒng)及版本、瀏覽器內(nèi)核、等信息的標(biāo)識(shí)。
Accepted Content-Encodings:服務(wù)端壓縮格式

9,右鍵界面

Open in new tab:在新的標(biāo)簽中打開(kāi)鏈接
Clear browser cache:清空瀏覽器緩存
Clear browser cookies:清空瀏覽器cookies
Copy:復(fù)制
Block request URL:攔截當(dāng)前請(qǐng)求url
Block request domian:攔截當(dāng)前域名下所有請(qǐng)求
Replay XHR:重新請(qǐng)求AJAX
Sort By:排序請(qǐng)求
Header Options:顯示請(qǐng)求頭選項(xiàng)
Save all as HAR with content:保存所有請(qǐng)求為.har文件
10,copy

Copy Link Address:復(fù)制資源url到系統(tǒng)剪貼板
Copy Response:復(fù)制HTTP響應(yīng)
Copy stack trace:復(fù)制堆棧信息
Copy as PowerShell:復(fù)制請(qǐng)求PwoerShell代碼
Copy as fetch:復(fù)制請(qǐng)求fetch代碼
Copy as Node.js fetch:復(fù)制請(qǐng)求Node.js fetch代碼
Copy as cUrl(cmd):復(fù)制請(qǐng)求cUrl 命令代碼
Copy as cUrl(bash):復(fù)制請(qǐng)求cUrl 命令代碼
Copy all as PowerShell:復(fù)制所有請(qǐng)求PwoerShell代碼
Copy all as fetch:復(fù)制所有請(qǐng)求fetch代碼
Copy all as Node.js fetch:復(fù)制所有請(qǐng)求Node.js fetch代碼
Copy all as cUrl(cmd):復(fù)制所有請(qǐng)求cUrl 命令代碼
Copy all as cUrl(bash):復(fù)制所有請(qǐng)求cUrl 命令代碼
Copy All as HAR:復(fù)制所有請(qǐng)求HAR文件