關於F12開發者工具中Network模塊，無論是開發代碼調試，還是測試定位界面元素，定位問題等，使用的都比較頻繁，我本人也是熱衷於F12的使用，本篇文章便是結合自己使用的一些心得和網上的資料整理出來的（以百度首頁爲例）。
開發者工具基本介紹
最常用的四個功能模塊：
-
Elements：主要用來查看前面界面的html的Dom結構，和修改css的樣式。css可以即時修改，即使顯示。
-
console：這個除了查看錯誤信息、打印調試信息(console.log())、寫一些測試腳本以外，還可以當作Javascript API查看用。例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入"console"並執行
-
Sources：主要用來調試js和查看源代碼
-
Network：下面詳細介紹
network詳細介紹
-
第一個紅色記錄按鈕， 處於打開狀態時會在此面板進行網絡連接的信息記錄，關閉後則不會記錄
-
清除按鈕，清除當前的網絡連接記錄信息，（點擊一下就能清空）
-
捕獲截屏按鈕，記錄頁面加載過程中一些時間點的頁面渲染情況，截圖根據可視窗口截取
-
過濾器， 能夠自定義篩選條件，找到自己想要資源信息，如下圖所示
- view後面的兩個按鈕，前者點亮文本，後者顯示時間流，可根據時間查看對應時間下瀏覽器請求的資源信息。
- 【Group by frame】，這個用的不多，frame應該是內聯框架。
- 【Preserve log】是否保留日誌，當選擇保留日誌，重新加載url當前界面時，之前請求顯示的資源信息，會保留下來。
- 【Disable cache】是否進行緩存，開發者工具生效，打開這個開關，則頁面資源不會存入緩存，可以從Status欄的狀態碼看 文件請求狀態。
- 【Offine Online】設置模擬限速，設置限速可以模擬處於各種網絡環境下的不同用戶訪問本頁面的情況，如圖示。
Network主題內容介紹
-
Name/Pat：資源名稱以及URL路徑 （main.css）
-
Method：Http請求方法 (GET或者POST)
-
status/Text：Http狀態碼/文字解釋 （200，ok）
-
Type ：請求資源的MIME類型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
-
Initiator：解釋請求是怎麼發起的，有四種可能的值
1.Parser ：請求是由頁面的html解析時發送 2.Redirect：請求是由頁面重定向發送 3.script ：請求是由script腳本處理髮送 4.other ：請求是由其他過程發送的，比如頁面裏的Link鏈接點擊 -
size/content：size是響應頭部和響應體結合的大小，content是請求解碼後的大小
-
time：請求的時間（ms）,pending表示延遲等待
請求文件具體說明
點擊某個具體請求後的界面，如下圖所示：
一共分爲五個模塊：
- Headers：如上圖，Header面板列出資源的請求url、HTTP方法、響應狀態碼、請求頭和響應頭及它們各自的值、請求參數等等
- Preview：預覽面板，用於資源的預覽
- Response：響應信息面板包含資源還未進行格式處理的內容
- Cookies：請求中的Cookie信息，包括請求和返回時的緩存信息
- Timing：資源請求的詳細信息花費時間
