記憶盒子

把記憶裝進灰色的盒子,封裝起來,那年那月,重新拾起。

首頁搜索目錄
search
當前主題: 互聯(lián)網(wǎng)絡(luò)

如何利用Firefox自帶的Web開發(fā)者工具分析網(wǎng)頁

作者:Kaka    時間:2013-11-26 23:55:30    瀏覽:    評論:1

      估計很多人都用過了Firefox自帶的Web開發(fā)者工具來診斷或調(diào)試網(wǎng)頁,尤其是網(wǎng)站建設(shè)人員。該工具非常強大,當我們想研究一張網(wǎng)頁的訪問詳情時,例如想知道網(wǎng)頁包含有哪些請求,各請求的訪問是否正常,訪問時間是怎樣的等等,那么我們就可以借助于該工具。

      Firefox自帶的Web開發(fā)者工具使用非常簡單,點擊一下按鈕就可以窺視到網(wǎng)頁內(nèi)部各元素的瀑布流式請求,可以看到網(wǎng)頁里哪些文件在什么時候被請求和耗時多少并顯示到瀏覽器上。

      Firefox自帶的Web開發(fā)者工具在哪里

      點擊菜單->工具->Web開發(fā)者->切換工具,便可看到如下圖示

圖1:Firefox Web開發(fā)者工具

圖1:Web開發(fā)者工具

      默認的Web開發(fā)者工具包含控制臺、查看器、調(diào)試器、央視編輯器、分析器和網(wǎng)絡(luò)分析器這6個部分,本文要說的是網(wǎng)絡(luò)分析器這部分。

      點擊Web開發(fā)者工具的“網(wǎng)絡(luò)”標簽,如上圖1,會看到下面出現(xiàn)一個空表單頭,包含的內(nèi)容有方法、文件、域名、類型、大小和時間線,在最下面還有幾個標簽可以切換:所有、HTML、CSS、JS、XHR、字體、圖片、媒體、Flash。

      如何利用網(wǎng)絡(luò)分析器分析網(wǎng)頁

      1、把窗口切換到“網(wǎng)絡(luò)分析器”(如下圖,點擊“網(wǎng)絡(luò)”這個標簽)。

圖2: Firefox網(wǎng)絡(luò)分析器

圖2: Firefox網(wǎng)絡(luò)分析器

      2、然后訪問需要分析的網(wǎng)頁,這時我么可以看到網(wǎng)頁的瀑布流請求和時間線顯示,如下圖

圖3: Firefox網(wǎng)絡(luò)分析器

圖3: Firefox網(wǎng)絡(luò)分析器

      通過上圖3所示,可以清晰的看到網(wǎng)頁內(nèi)部各文件的請求情況,右側(cè)是訪問時間線。

      點擊任何一行,右邊就會出現(xiàn)該請求的詳細信息,如下圖所示

圖4: Firefox網(wǎng)絡(luò)分析器

圖4: Firefox網(wǎng)絡(luò)分析器

      再想展開時,點擊那個展開的圖標即可,如下圖

圖5: Firefox網(wǎng)絡(luò)分析器

圖5: Firefox網(wǎng)絡(luò)分析器

      總結(jié)

      利用Firefox網(wǎng)絡(luò)分析器分析網(wǎng)頁,不需要安裝任何插件,既簡單又方便,可謂Web開發(fā)者的一大利器。

x

標簽: Firefox  

※ 網(wǎng)站速度慢?試試網(wǎng)站自動優(yōu)化工具 ※

上一篇: 標頭“Vary:Accept-Encoding”指定方法及其重要性分析
下一篇: Chrome的開發(fā)者工具比Firefox的用戶體驗更好

發(fā)表評論:

◎歡迎參與討論,請在這里發(fā)表您的看法、交流您的觀點。

訂閱博客                   QQ交流群(312716741)

  • 通過Google訂閱本站 通過鮮果訂閱本站 通過抓蝦訂閱本站
  • 通過QQ郵箱訂閱本站 通過Yahoo訂閱本站 通過有道訂閱本站

Search

最新評論及回復

最近留言

網(wǎng)站分類

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009-2024 All Rights Reserved. 粵ICP備14028160號-1

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009-2024 All Rights Reserved.