
image
前言
寫這篇文章是細說網(wǎng)頁開發(fā)者工具F12 - 前端開發(fā)利器三,Network篇,若覺得不錯請關注作者。
哎,是時候讓人類感受黑暗的恐懼了!......居然停電了。
這次我們來細說F12工具的Network面板。

image
功能有些多,我們從上往下來介紹,首先是記錄network的開關,默認為打開狀態(tài)。

image
第二個Clear按鈕,可以清除記錄下來的Network內(nèi)容。

image
第三個是捕獲網(wǎng)頁加載截圖(Capture Screenshots)??梢杂涗浢看蔚捻撁嬗行录虞d的時候的截圖。可以通過這個截圖了解頁面的具體顯示過程。

image
第四個是Filter濾鏡功能,就是提供下面紅框框起來的功能的。下文在詳細介紹

image
第五個是顯示request(請求)列表的樣式的按鈕,提供大和小(large|small)兩種。
下圖的選擇大的樣式

image
下圖是顯示小的樣式

image
第六個是總的概覽圖(咳咳,作用未知。知道的小伙伴歡迎留言)

image
第七個是Group by frame(咳咳,作用未知。知道的小伙伴歡迎留言)

image
第八個是Preserve log。勾選這個按鈕可以保存network不被頁面刷新清除。下圖是我們勾選Preserve log刷新四次的效果,可以看到四次network的記錄

image
第九個是Disable cache(禁用緩存)。功能就是禁用本地緩存,強制刷新

image

image
第十個是離線,效果如下,就是斷網(wǎng)狀態(tài)。

image
Filder
接下來細說Filder,第一個作用未知,咳咳

image
第二個All表示顯示所有類型的request

image
XHR表示顯示xhr請求,就是常說的ajax。

image
js,css,img,media,font略過,doc表示document

image
接下來我們打開一個請求,第一欄是header,這里有請求頭和響應頭數(shù)據(jù)。(寫爬蟲的時候經(jīng)常用到)

image
Preview,表示響應預覽。doc的就是顯示的代碼,若是圖片,就可以看到預覽圖。

image

image
Response表示返回值,doc的還是顯示的代碼,有一些會返回的json格式。比如一言接口的返回值。

image

image
Timing,記錄著整個請求的時間段

image
還有一個是Cookie,記錄這request請求發(fā)送和接收到的cookie

image

image
未完待續(xù)......Continued......