一》
二》
三》
1.Controls 控制Network的外觀和功能芳肌。?
2.Filters 控制Requests Table具體顯示哪些內(nèi)容灵再。
3.Overview 顯示獲取到資源的時(shí)間軸信息。
4.Requests Table 按資源獲取的前后順序顯示所有獲取到的資源信息亿笤,點(diǎn)擊資源名可以查看該資源的詳細(xì)信息翎迁。
5.Summary 顯示總的請(qǐng)求數(shù)、數(shù)據(jù)傳輸量责嚷、加載時(shí)間信息鸳兽。
NetWork面板的Requests Table 包含著HTTP請(qǐng)求和響應(yīng)的具體信息掂铐,是比較常用的一塊
?Name 資源名稱罕拂,點(diǎn)擊名稱可以查看資源的詳情情況,包括Headers全陨、Preview爆班、Response、Cookies辱姨、Timing柿菩。
?Status HTTP狀態(tài)碼。
?Type 請(qǐng)求的資源MIME類型雨涛。
?Initiator 標(biāo)記請(qǐng)求是由哪個(gè)對(duì)象或進(jìn)程發(fā)起的(請(qǐng)求源)。
?Parser: 請(qǐng)求由Chrome的HTML解析器時(shí)發(fā)起的。
?Redirect:請(qǐng)求是由HTTP頁(yè)面重定向發(fā)起的侍芝。
?Script:請(qǐng)求是由Script腳本發(fā)起的辫呻。
?Other:請(qǐng)求是由其他進(jìn)程發(fā)起的,比如用戶點(diǎn)擊一個(gè)鏈接跳轉(zhuǎn)到另一個(gè)頁(yè)面或者在地址欄輸入U(xiǎn)RL地址蚯根。
?Size 從服務(wù)器下載的文件和請(qǐng)求的資源大小后众。如果是從緩存中取得的資源則該列會(huì)顯示(from cache)
?Time 請(qǐng)求或下載的時(shí)間,從發(fā)起Request到獲取到Response所用的總時(shí)間颅拦。
?Timeline 顯示所有網(wǎng)絡(luò)請(qǐng)求的可視化瀑布流(時(shí)間狀態(tài)軸)蒂誉,點(diǎn)擊時(shí)間軸,可以查看該請(qǐng)求的詳細(xì)信息距帅,點(diǎn)擊列頭則可以根據(jù)指定的字段可以排序右锨。
四 》
查看具體資源的詳情
通過(guò)點(diǎn)擊某個(gè)資源的Name可以查看該資源的詳細(xì)信息,根據(jù)選擇的資源類型顯示的信息也不太一樣碌秸,可能包括如下Tab信息:
?Headers 該資源的HTTP頭信息陡蝇。
?Preview 根據(jù)你所選擇的資源類型(JSON痊臭、圖片、文本)顯示相應(yīng)的預(yù)覽登夫。
?Response 顯示HTTP的Response信息广匙。
?Cookies 顯示資源HTTP的Request和Response過(guò)程中的Cookies信息。
?Timing 顯示資源在整個(gè)請(qǐng)求生命周期過(guò)程中各部分花費(fèi)的時(shí)間恼策。
針對(duì)上面4個(gè)Tab進(jìn)行詳細(xì)講解一下各個(gè)功能:
⑴查看資源HTTP頭信息
在Headers標(biāo)簽里面可以看到HTTP Request URL鸦致、HTTP Method、Status Code涣楷、Remote Address等基本信息和詳細(xì)的Response Headers分唾、Request Headers以及Query String Parameters或者Form Data等信息。
⑵
⑶查看資源HTTP的Response信息?
⑷查看資源Cookies信息?
五》
六》點(diǎn)擊事件斷點(diǎn)
七》開(kāi)發(fā)者工具打開(kāi)之后狮斗,瀏覽器刷新圖標(biāo)上右鍵會(huì)出現(xiàn)清空緩存并硬性重新加載绽乔。這一方法能夠在開(kāi)發(fā)者工具打開(kāi)時(shí)快速清理緩存。
八》選中地址欄中的URL碳褒,Ctrl + Shift + Del 快捷鍵清除緩存折砸。
九》
開(kāi)發(fā)者工具==》Settings