** Name/Path: 資源名稱以及URL路徑；
Method: HTTP請(qǐng)求方法；
Status/Text: HTTP狀態(tài)碼/文字解釋；
Type: 請(qǐng)求資源的MIME類型；
Initiator解釋請(qǐng)求是怎么發(fā)起的，有四種可能的值：**
- Parser：請(qǐng)求是由頁(yè)面的HTML解析時(shí)發(fā)送的；
- Redirect：請(qǐng)求是由頁(yè)面重定向發(fā)送的；
- Script：請(qǐng)求是由script腳本處理發(fā)送的；
- Other：請(qǐng)求是由其他過程發(fā)送的，比如頁(yè)面里的link鏈接點(diǎn)擊，在地址欄輸入U(xiǎn)RL地址。
Size/Content: Size是響應(yīng)頭部和響應(yīng)體結(jié)合起來的大小，Content是請(qǐng)求內(nèi)容解碼后的大小。進(jìn)一步了解可以看這里Chrome Dev Tools - “Size” vs “Content”；
Time/Latency: Time是從請(qǐng)求開始到接收到最后一個(gè)字節(jié)的總時(shí)長(zhǎng)，Latency是從請(qǐng)求開始到接收到第一個(gè)字節(jié)的時(shí)間；
Timeline: 顯示網(wǎng)絡(luò)請(qǐng)求的可視化瀑布流
，鼠標(biāo)懸停在某一個(gè)時(shí)間線上，可以顯示整個(gè)請(qǐng)求各部分花費(fèi)的時(shí)間。
以上是默認(rèn)顯示的列，不過我們可以在瀑布流的頂部右鍵，這樣就可以選擇顯示或者隱藏更多的列，比如Cache-Control, Connection, Cookies, Domain等。
我們可以按照上面任意一項(xiàng)來給資源請(qǐng)求排序，只需要單擊相應(yīng)的名字即可。Timeline排序比較復(fù)雜，單擊Timeline后，需要選擇根據(jù)Start Time、Response Time、End Time、Duration、Latency中的一項(xiàng)來排序。
紅色區(qū)塊2中，一共有6個(gè)小功能：
Record Network Log: 紅色表示此時(shí)正在記錄資源請(qǐng)求信息；
Clear: 清空所有的資源請(qǐng)求信息；
Filter: 過濾資源請(qǐng)求信息；
Use small resource raws: 每一行顯示更少的內(nèi)容；
Perserve Log: 再次記錄請(qǐng)求的信息時(shí)不擦出之前的資源信息；
Disable cache: 不允許緩存的話，所有資源均重新加載。
選擇Filter后，就會(huì)出現(xiàn)如紅色區(qū)塊3所顯示的過濾條件，當(dāng)我們點(diǎn)擊某一內(nèi)容類型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只顯示該特定類型的資源。在XHR請(qǐng)求中，可以在一個(gè)請(qǐng)求上右鍵選擇“Replay XHR”來重新運(yùn)行一個(gè)XHR請(qǐng)求。
資源的詳細(xì)內(nèi)容有以下幾個(gè)：
- HTTP request and response headers
- Resource preview: 可行時(shí)進(jìn)行資源預(yù)覽；
- HTTP response: 未處理過的資源內(nèi)容；
- Cookie names and values: HTTP請(qǐng)求以及返回中傳輸?shù)乃蠧ookies；
- WebSocket messages: 通過WebSocket發(fā)送和接收到的信息；
- Resource network timing: 圖形化顯示資源加載過程中各階段花費(fèi)的時(shí)間。
