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文件
