前面兩篇關於IE11開發人員工具的文章，我們分別介紹了兩個新的功能：UI響應工具和內存分析工具，今天為大家介紹一個老功能：網絡工具，雖然是在IE9開始已經加入了這個工具，但是在IE11中還有有很多改進和加強的。
當我們在加載網頁的時候，會因為種種原因導致網頁加載速度太慢，比如網站后端響應時間太長，網站一次性加載的資源太多需要發送過多的請求，網絡狀況不好，甚至是電腦配置太差?
“網絡”工具包含了涉及加載和網頁操作的所有網絡請求的信息，這樣我們就可以利用這些信息去分析上面的問題。
下面我們從三個部分來講解IE11開發人員工具中的“網絡”面板的使用。
認識“網絡”工具
首先我們來認識一下“網絡”工具的UI界面，在最上面有一排按鈕，下面是一個列表。
上面那排按鈕中最左邊第一個按鈕是啟用網絡流量捕獲(F5)，我們點擊這個按鈕之后“網絡”工具就開始開始記錄網絡流量，並且在下面的摘要視圖中把捕獲到的這些信息顯示出來;
第二個按鈕從圖標上來看就已經很形象了，它是導出捕獲的流量，點擊之后就可以將剛剛捕獲到的這些數據導出為XML或者CSV格式;
第三個按鈕是一個開關，它是始終從服務器中刷新，從字面上就能看出，當點擊開啟之后的獲取的頁面元素都是從服務器中獲取，而不使用瀏覽器的緩存，其實我們可以把它簡單的理解為禁用緩存的開關就好;
第四個按鈕是清除瀏覽器緩存(Ctrl + R)，點擊一下之后IE11的開發人員工具就會清除掉現在瀏覽器中的緩存，我們就可以測試出頁面首次加載需耗費的時間;
第五個按鈕是清除域的 Cookie，這個也很好理解，就是清除掉當前域中的 Cookie，這樣在測試過程中想清除掉要測試的網站 Cookie 就可以只刪除掉當前域相關的所有 Cookie 而不會影響到其他的網站;
第六個按鈕也是一個開關，默認情況下它是開啟的狀態，它的中文翻譯是導航時清除項，它的作用是當它開啟的時候每次導航到新的頁面就會清除掉之前記錄的信息，如果沒有開啟它那跳轉到新的頁面之后就會用一條分隔線標注哪些是之前頁面的信息，哪些是當前新的頁面的信息;
第七個按鈕是清除所有項，點擊它就可以將摘要視圖中顯示的這些信息都清除掉;
最后還有一個搜索框，它可以用來搜索捕獲到的這些流量中的字符串，輸入要搜索的字符串之后就按 ENTER 就可以依次查看了。
“摘要”視圖列表
這個列表上方有“摘要”、“詳細信息”這兩個鏈接，“網絡”工具提供給我們的就是這兩種視圖，默認情況下我們看到的就是如圖上那樣的列表，這個列表就是摘要視圖，當我們選中開發這個列表中具體某一項的時候就會跳轉到這個信息的詳細信息視圖了，我們可以通過點擊“摘要”、“詳細信息”這兩個鏈接在這兩種視圖間切換。
在摘要視圖中顯示捕獲到的所有信息的快速預覽，可以看到請求的 URL;某一條記錄的連接協議，一般來說可以看到的協議有 HTTP 和 HTTPS 這兩種，當然除了這兩種協議之外還有很多很多種協議，只是它們就不那么常見了;后面還有某一條記錄的請求方式，我們就可以看到某條記錄是 GET 方式還是 POST 方式進行的請求;再后面的結果就是 HTTP 的響應狀態碼，比如 200、302、404、500 等，通過這個我們就可以非常直觀的看到這一條請求是從服務器上加載的資源，還是直接使用的本地的緩存，這個資源是否存在，或者服務器出現了錯誤等，這對我們非常有幫助;再后面的類型就是某條記錄的 MIME 類型是什么，查看 MIME 類型就能知道這次請求的元素是一個 JavaScript 文件，還是一張 PNG 格式的圖片;后面的已接受跟已花費代表這條請求的數據總量有多大，瀏覽器在接收這些內容所耗費的總時間是多少;發起程序這列就可以知道某條請求是由誰發起的，一般來說最常見的就是某個 DOM 元素，比如 <img>標簽會請求一張圖片，那發起程序就是<img> 這個標簽了。
最后一列“計時”是非常有意思的一列，它通過圖形的方式非常直觀的告訴我們某條記錄所耗費的時間，在這一列上我們看到有綠色跟紅色兩條豎線，每行的記錄還由三個顏色組成。綠線跟紅線分別代表着整個頁面的 DOMContentLoaded 事件和 Load 事件，那邊綠線這個位置的時候就說明了DOM已經加載完成了，但是CSS、JS、圖片這些還沒加載完成，紅線的位置表示頁面上所有的 DOM、CSS、JS、圖片等都已經加載完成了。
詳細視圖頁面
在這個詳細視圖頁面中可以看到詳細視圖又由請求標頭、請求正文、響應標頭、響應正文、Cookie、發起程序、計時這幾部分組成。現在進入的這個頁面是詳細視圖的計時頁面，這個頁面跟摘要視圖相比更為詳細，因為摘要視圖只是給你一個全局的大致的快速預覽，而我們進入到詳細視圖頁面之后就可以仔細的去觀察這其中每條的具體內容了。剛剛有發現每條記錄是有三個顏色組成的，在這里就對每種顏色有了詳細的解釋。暗紅色代表開始，它表示從最初創建請求到發送請求之間的時間;黃色部分代表請求，表示接收到第一個字節所需的時間。發送請求並接收服務器的第一個響應所需花費的時間;藍色部分是響應，表示接收服務器的響應數據所花費的時間。除了這三種顏色之外還能看到上面標出了等候、差距這兩個部分，這讓我們在看這三種顏色所代表消耗的時間的時候能有一個參照。這僅僅只是一個計時部分IE11開發人員工具就幫我們記錄了如此多的信息，另外其實我們只要點擊到某行，下面的文本框中就會顯示出相應的說明，在這么多小的細節處處體現出IE11的開發人員工具的人性化。
看完了計時頁面，我們從頭開始來看看請求標頭和請求正文頁面，在請求標頭頁面顯示了發送至服務器的請求標頭，頁面中用鍵值對的方式來顯示出相關的信息，比如請求的值就包含了請求方式，請求的資源，請求的協議;Accept 表示它接收的MIME類型有哪些，Referrer表示這條請求的來源是誰，Accept-Language表示請求接收的語言是什么，User-Agent就是該條請求發送給服務器的瀏覽器的User-Agent的值，Accept-Encoding這行可以看出服務器端是否有啟用gzip壓縮。
在請求正文頁，我們發現大多數的請求正文都是空白的，因為請求正文一般是用於包含POST請求的數據，這樣我們找到一個 POST 的請求的就可以看到請求正文了，而內容就正是POST要發送至服務器的數據。
請求部分的看完了再來看看響應標頭和響應正文。響應的這部分顯示的是從服務器接收的響應標頭跟接收到的響應的數據，如果響應的內容是圖片，IE11開發人員工具可以直接將圖片顯示出來。
Cookie 這頁用來顯示已發送和已接收的 Cookie，這里面有八列，方向表示是已發送的還是已接收的 Cookie，鍵值這兩列用來顯示用 Cookie 來保存的數據，后面還有過期日期、域、路徑、安全等用來顯示 Cookie 的更多信息。因為如果包含了 Cookie,，那么每次請求都會發送 Cookie，所以我們一般會采用 Cookie-free domains 來優化性能，那么我們在 Cookie 這頁就可以幫助我們來檢查 Cookie-free domains 的優化情況了。
最后剩下的發起程序這頁就顯示了發起程序的詳細信息。
IE11 開發人員工具中“網絡”面板功能這部分的內容就全部介紹完了。
文章引用地址：http://www.iefans.net/ie11-f12-kaifa-renyuan-gongju-wangluo-gaijin/ 作者：iefans