iPhone 6 Plus 開箱,相機又再進化了!
PadFone S、M8、S5 怎麼選?你選手機的重點是?
星巴克皮夾動手做,影片教學更好懂
你更新 iOS 8 了嗎?重點功能快速看!

Firefox外掛《Firebug》檢測網頁架構、開啟速度一把罩!

自從架站之後,每天除了努力的寫文,就是在研究網頁那邊可以再瘦一點,再快一點那要怎麼知道哪邊佔了多大,讀取多久呢?其實線上也有很多可以檢測的工具,不過丫湯都是用Firefox的外掛《Firebug》來檢測網頁,或是觀看別人的網頁結構,藉此學習並累積經驗,對於網頁設計是個不可或缺的小幫手喔~

Firebug(螢火蟲):

官方網站:https://addons.mozilla.org/zh-TW/firefox/addon/1843

軟體版本:1.3.3(繁中)

軟體簡介:Firefox的擴充套件,用以檢測網頁結構及讀取速度。

一、安裝方法:

至官方網站點擊〝安裝到Firefox〞

點擊〝立即安裝〞

〝重新啟動Firefox〞即完成安裝

二、檢測網站開啟速度:

在安裝完畢後,在右下角會出現一支小小的〝螢火蟲〞,輕輕的點他一下吧!

在主控台的地方將3個選項都勾選,按下〝Enable selected panels for steachs.com〞

等待檢測完畢後,再點擊〝網路〞,就可以觀看到網站每一細項的讀取速度以及所佔檔案大小,如此一來就可以針對檔案較大或讀取較慢的檔案去做修改囉。

三、檢視網頁架構:

接下來我們按下〝觀察〞,再將滑鼠移到任一物件或文字上,在左下的地方會顯示該物件的語法,則右邊是顯示CSS,這對於研究別人的佈景求進步有很大的幫助,可以看看別人是怎麼設計的哦~或是在修改佈景時,不知道CSS是哪一段時,也可以這樣尋找。

四、Firebug擴充套件:

除了Firebug預設的功能之外,還可以再加裝以下套件來擴充功能

YSlow:提供各種網頁分析數據

Firecookie:檢視且管理網頁所用的cookies

FirePHP:PHP除錯用

Pixel Perfect:直接新增網頁元件在頁面上做模擬測試,並直接取得編碼參考

以上四個額外的套件站長就不多說明囉,如果你常常在設計網頁,相信這對你有很大的幫助哦,趕緊試看看吧!平常不用的時候,就記得去把套件停用吧~

阿湯 作者:阿湯

對電腦 & 網路資訊充滿興趣與熱情、瘋了似的每日堅持發文,「阿湯」這個名字是由湯姆克魯斯而來的,雖然我沒有他帥氣,也不會演電影,但我會寫文章....

更多關於的文章》

16 個留言

  1. 闇o夜神 說道:

    好像常常看到你的網站

    有新的再報好康喔~

    記得寄郵件跟我通知一下^^

    阿湯說:

    可以訂閱RSS呀^^

  2. Ausir 說道:

    來太晚了

    只能罰站了

    阿湯說:

    水桶拿好。乖…

  3. Belito 說道:

    看起來是很實用的工具呢!!

    阿湯說:

    不好用就不敢推薦囉~!

  4. 曼蒂 說道:

    呵.當然好啊:p
    不過我是開玩笑的.希望別當真才好.
    你的文章很棒喔.我會多來看看的:b

    阿湯說:

    咖啡來囉~~

  5. 愛米粒 說道:

    ㄜ~才剛把FF刪除~
    看來得再安裝一下,最近用IE踢寶箱~
    常常力不從心(明明是老人手太慢)

    阿湯說:

    Firefox還是很好用啦

    如果你堅持愛用IE

    建議你可以灌IE+KKman

    然後用kkman踼寶,應該不錯快

  6. 曼蒂 說道:

    這篇很實用喔..
    另,有沒有招待咖啡~~我需要醒腦:P

    阿湯說:

    韋恩特濃咖啡好嗎…

  7. 大鐵 說道:

    原來如此,是 Gravater 呀 XD
    我也申請囉!! 試試看

    阿湯說:

    鐵爸你的頭漏出來囉~

  8. 拆組達人 說道:

    還真的蠻適合每日想著減肥的人(指網站 :as25 )
    --
    拆組達人 辦公室大小事全都能

    阿湯說:

    在說我嗎…

  9. hsin 說道:

    原來我誤認他是蟑螂很久了.......................XD

    阿湯說:

    是還蠻像的XD

  10. 大鐵 說道:

    這真是好東西 !!
    用這個我就可以知道煉鋼廠為什麼載入那麼慢了 ^^"
    謝謝阿湯的分享了。

    另外,我要怎麼樣才會有頭像呢?天仙 和 Nick 都有耶 @@

    阿湯說:

    參考這一篇

    http://steachs.com/archives/602

    沒有好好在我這裡做功課哦..

    打屁屁

  11. hi小飛俠 說道:

    看不懂聽不懂根本是外星文,
    但是最近想要鋪東西上奇摩網拍,
    你說的CCS佈景是不是就是這個東西,
    大師,如果想要自己設計好的版面(一拉做的),
    可以放得上去嗎?!

    阿湯說:

    是CSS…

    這不是什麼佈景

    這是用來針對排版所寫的語法

    這跟奇摩拍賣應該沒關係吧….

  12. Qmao 說道:

    我也不希望自己的網頁開的很慢
    來使用firebug看看
    將那些會拖慢速度的東西
    砍掉~~~

    阿湯說:

    希望可以幫到你哦︿︿

  13. 豬拔 說道:

    哇!!這個好用喔!!

    阿湯說:

    :as66

  14. 安安 說道:

    你請我來坐就來坐一下
    一杯茶謝謝~XD

    阿湯說:

    烏龍茶好嗎

  15. OldNick 說道:

    這套件還可以直接編輯預覽喔

    對我這種怕改錯的人挺方便的 :as16

    d

    阿湯說:

    我前陣子都用這個外掛在看一堆人的佈景XD

  16. 天仙 說道:

    每天都要坐沙發~~~ :as16

    阿湯說:

    老闆請坐…

發表留言 »

姓名(*)
信箱(*)
網站(選填)

留言前請輸入「YA」

sitebro