IE9開發人員工具“網絡捕獲”功能詳解

2024-09-03 21:29:41

字體：大中小

來源：轉載

供稿：網友

　　在IE7時代，微軟推出了一款叫做“開發人員工具”的工具欄，下載安裝之后，可以在IE中更方便的分析HTML代碼，了解網頁中各個元素的屬性、樣式等信息，對開發人員調試網頁來說特別方便。由于這個功能讓IE除了可以瀏覽之外，還可以很好的進行調試，因此，“開發人員工具”順利的成為了IE8中的一個內置功能，用戶可以在瀏覽網頁時按F12直接調出它來使用。

　　到了如今的IE9，這個工具的功能又進行了增強，新設計了一個“網絡”選項卡。通過它，我們就可以捕獲瀏覽器打開網頁時每個元素的加載情況。有了這樣的功能，無論對于開發人員還是普通用戶，都有很大的用處。

　　我們知道，網頁的基礎是HTML代碼，其中包括網頁中需要的圖片、腳本文件、Flash文件等各種元素的網址(URL)、顯示方式等等。瀏覽網頁時，瀏覽器會通過其URL將這些文件一個一個下載下來，保存到瀏覽器緩存中，這樣才能把他們顯示出來。

　　開始使用

　　在需要調試或分析的網頁上按鍵盤上的F12鍵，即可打開“開發人員工具”，除了包含原有的HTML、CSS、控制臺、腳本等選項卡之外，在主界面中還多了一個“網絡”選項卡，這就是今天要介紹的主角兒：

　　單擊“開始捕獲”按鈕，程序即可開始捕獲當前IE9瀏覽器頁面中的網絡通信，一般包括HTTP的請求及其返回的數據，例如網頁代碼及其相關的圖片、腳本等資源。不過，如果這時候頁面已經打開完成，則不會有網絡通訊行為，這里不會顯示任何結果。

　　按下F5，讓網頁重新加載，這時候瀏覽器進行的所有連接和下載就都可以通過網絡選項卡查看到了。

　　摘要視圖

　　默認看到的摘要視圖中，會列出所有已經捕獲到的HTTP請求和接收行為。當我們訪問Bing主頁時，會得到這樣的結果：

　　這樣，用戶或開發人員就可以了解到每次HTTP請求的主要信息了：

　　URL：請求獲取的網絡文件路徑。

　　方法：HTTP請求的方法，GET或POST。

　　結果：標準的請求結果代碼或狀態信息，例如200表示順利的返回了需要的文件，404表示該文件不存在，503表示服務器暫時不可用，500表示服務器發生了內部錯誤等。

　　類型：請求文件的MIME類型。

　　已接收：當前已經下載的文件大小。如果該文件比較大，例如是視頻文件，這個數值可能會隨著下載不斷增大。

　　已花費：下載請求從一開始到下載完成所花的時間。

　　發起程序：觸發該下載行為的事件或網頁對象。例如，網頁本身的下載是由于用戶進行刷新操作才產生的，因此這里會是“刷新”：

　　計時：通過甘特圖直觀的展示出文件下載過程中每一個步驟花費的時間。這對我們了解和分析網頁的加載情況是非常有用的：

　　在執行刷新時，往往我們能發現很多文件的下載結果都是304，這說明這個網頁之前在瀏覽器中已經打開并緩存了相關的文件，經過和服務器的聯系，服務器響應說這個文件沒有經過更改，可以直接使用緩存的版本。因此，這些文件實際上都是通過瀏覽器緩存直接讀取使用的，在刷新操作中并沒有經過重新下載，并且這些文件的加載時間都很小，小于1毫秒：

　　如果希望網頁完全重新加載，可以單擊開發人員工具欄的菜單，選擇“清楚瀏覽器緩存”命令，或者選擇“清除此域的瀏覽器緩存”，之后再刷新頁面，網頁就會完全通過服務器進行下載刷新了。

　　詳細視圖

　　在摘要視圖中選擇列表中的某個文件，單擊“轉到詳細視圖”按鈕，可以轉到詳細視圖面板。在這里，我們可以查看到關于這個下載請求的更加詳細的信息：

　　這些信息包括HTTP的請求標頭、請求正文、響應標頭、響應正文，與該文件下載行為相關的Cookie、發起程序，以及比摘要視圖中更加詳細的計時信息。也就是說，詳細視圖已經將瀏覽器如何與服務器通信的協議層面的信息都展示給我們了，這些信息對于開發人員和調試人員來說無疑是不可多得的好資料，通過它們可以使網站調試工作變得非常輕松。

　　例如，在“計時”選項卡中，我們可以看到這個下載請求每一步的開始時間和持續時間，高級的用戶可以通過這樣的信息判斷出是因為網絡狀況不好，還是服務器的原因導致了網頁加載緩慢。開發人員和調試人員也可以使用這些信息找到網頁加載的瓶頸，通過調整代碼或服務器，使網頁加載更快：

　　“網絡捕獲”的妙用

　　當用戶在網上看到喜歡的內容時，一定想將他們保存到電腦中，以后可以慢慢欣賞，也可以成為制作其他資料的素材。對于文本，我們復制粘貼，對于圖片，也可以右鍵另存，但遇到視頻文件就比較頭痛了。以前，我們要么從隱藏的Internet緩存中搜索成千上萬的文件，找到需要的那個視頻;要么需要用專門的軟件獲取其URL，然后將它下載下來。而有了IE9，利用“開發人員工具”中這個網絡捕獲功能和下載管理器，就可以直接完成這項任務。