估計很多人都用過了Firefox自帶的Web開發者工具來診斷或調試網頁,尤其是網站建設人員。該工具非常強大,當我們想研究一張網頁的訪問詳情時,例如想知道網頁包含有哪些請求,各請求的訪問是否正常,訪問時間是怎樣的等等,那么我們就可以借助于該工具。
Firefox自帶的Web開發者工具使用非常簡單,點擊一下按鈕就可以窺視到網頁內部各元素的瀑布流式請求,可以看到網頁里哪些文件在什么時候被請求和耗時多少并顯示到瀏覽器上。
Firefox自帶的Web開發者工具在哪里
點擊菜單->工具->Web開發者->切換工具,便可看到如下圖示

圖1:Web開發者工具
默認的Web開發者工具包含控制臺、查看器、調試器、央視編輯器、分析器和網絡分析器這6個部分,本文要說的是網絡分析器這部分。
點擊Web開發者工具的“網絡”標簽,如上圖1,會看到下面出現一個空表單頭,包含的內容有方法、文件、域名、類型、大小和時間線,在最下面還有幾個標簽可以切換:所有、HTML、CSS、JS、XHR、字體、圖片、媒體、Flash。
如何利用網絡分析器分析網頁
1、把窗口切換到“網絡分析器”(如下圖,點擊“網絡”這個標簽)。

圖2: Firefox網絡分析器
2、然后訪問需要分析的網頁,這時我么可以看到網頁的瀑布流請求和時間線顯示,如下圖

圖3: Firefox網絡分析器
通過上圖3所示,可以清晰的看到網頁內部各文件的請求情況,右側是訪問時間線。
點擊任何一行,右邊就會出現該請求的詳細信息,如下圖所示

圖4: Firefox網絡分析器
再想展開時,點擊那個展開的圖標即可,如下圖

圖5: Firefox網絡分析器
總結
利用Firefox網絡分析器分析網頁,不需要安裝任何插件,既簡單又方便,可謂Web開發者的一大利器。

