? ? ? ? 1、問(wèn)題描述：在我們的日常開(kāi)發(fā)生活中，肯定離不開(kāi)Chrome開(kāi)發(fā)者工具。通過(guò)控制臺(tái)我們可看到資源加載、頁(yè)面元素、數(shù)據(jù)請(qǐng)求、緩存情況等。在一次問(wèn)題排查時(shí)，我突然發(fā)現(xiàn)其中的NetWork面板中只能看到圖片的加載狀況，看不到接口請(qǐng)求的相關(guān)信息，這對(duì)問(wèn)題排查帶來(lái)了極大的不便。
情況如圖所示：
1.png
? ? ? ?2、問(wèn)題的解決：我首先想到是不是因?yàn)闉g覽器版本問(wèn)題，但轉(zhuǎn)念一想，應(yīng)該不是；其次我想是不是電腦設(shè)置問(wèn)題，顯然更不是；所以我還是乖乖的去問(wèn)度娘，至此，才發(fā)現(xiàn)了一個(gè)很嚴(yán)重的問(wèn)題：我從沒(méi)有認(rèn)真的看過(guò)Chrome的控制臺(tái)，更別提其了解每個(gè)工具的具體使用功能，只是默認(rèn)使用基本開(kāi)發(fā)輔助工具。然后查到問(wèn)題原因，不過(guò)是因?yàn)槲艺`點(diǎn)了NetWork面板下的img選項(xiàng)而已。
2.png
選擇工具欄中的"All"選項(xiàng)，即可看到所有的網(wǎng)絡(luò)請(qǐng)求加載情況：(就是這么簡(jiǎn)單...)
3.png
3、有興趣的大家可以了解一下開(kāi)發(fā)者工具中的各個(gè)小工具都是什么作用
4.png
附：
《chrome 控制臺(tái)的 network 面板的使用總結(jié)》
作者：輕車剪地
鏈接：http://FrontEndDev.org/link/the-use-of-the-network-of-chrome-console-panel-concluded.html
