教學 | 如何使用firebug即時預覽css



會想寫這篇教學，是因為昨天看了迴紋針的噗有感而發
的確，就算寫了一堆css的教學文，如果大家無法善用身旁的工具，還是徒然。
FireFox的Firebug外掛真的是一個很好用的工具，使用他來修改你的網站版面，多半可以達到事半功倍的效果，而且你不用怕版面被你改壞掉，或是被其他網友發現你正在改版脫衣服

下載Firebug

Firebug是FireFox的擴充外掛，所以如果要使用Firebug，一定要搭配FireFox瀏覽器才有作用唷。
‧Firebug下載位置

使用Firebug

Firebug的功能非常強大，除了可以即時預覽你的網頁之外，還可以觀看網路執行狀況、DOM資訊以及script的偵錯...等等。
但在這裡我只會跟大家介紹Firebug裡的「HTML」以及「」功能。這兩個功能對一般使用者來說已經很足夠了:)，有需要更瞭解其他功能的朋友，可以自行摸索或是上網找相關議題唷。

在新春，我第一次嘗試使用影片做教學，搭配文字解說，跟大家說明怎麼使用Firebug
有興趣的朋友們可以點擊youtube影音觀看(我底下也有內嵌啦!!)

片長大概6分鐘，希望大家不要聽到睡著了(因為配音員講話毫無抑揚頓挫ORZ)，總之就請大家多多包涵，如果真的還有不懂的地方，歡迎留言問我唷!!!

引用網址：

相關文章
文章標籤：,

FACEBOOKs COMMENT():

EVERYBODYs COMMENT:

  • 1
    佑樣 (LV.8) // 2010.01.02 15:59

    firebug好用
    搭配stylish更是一絕
    現在chrome上也有firebug囉
    不過是lite版

  • 2
    Beer (LV.12) // 2010.01.02 16:49

    我很認真的看完影片了XD
    我覺得妳介紹得蠻清楚的
    我現在寫CSS是用Web Developer這個Firefox外掛在輔助
    但是看起來Firebug方便很多
    我也來去下載玩看看好了~ 哈哈
    聲音是妳的嗎? 聽起來有點啞~ 不過教學講得很好哦!! :wink:

  • 3
    Paddy (LV.31) // 2010.01.02 17:00

    哇，我竟然看完了！！

    推一下！！ 8)

  • 4
    muki (LV.1145) // 2010.01.02 18:06

    @ 佑樣
    stylish我已經沒什麼在用了
    一開始用很兇，後來想想強制改掉其他人做好的樣子去套我自己的，感覺不太尊重OTZ
    chrome我也沒用XD~不順手

    @ Beer
    好感動唷~~謝謝你認真看完他 :oops:
    我以前也是用Web Developer，但某次火狐升級後，WD沒有一起更新，加上我急用所以換成Firebug，沒想到一換就用到現在了XDDD

    我覺得Firebug好用的地方在於它可以觀察元素XD
    以前我用WD只有很單純改css而已，而且他在讀css有時候會有亂碼...

    聲音唷...我可以說不是我的聲音嗎=口=!!!!!(死不承認

    @ Paddy
    哈哈!!!!
    難得你也看完了，感動一下

  • 5
    香腸 (LV.51) // 2010.01.02 20:55

    棒呆了...下次我介紹Firebug時，就有影片可以貼了..這樣圖文教學文就可以少寫些了XD

  • 6
    殺氣 (LV.5) // 2010.01.02 21:02

    水耶 看完影片後 又讓我知道一些使用方法
    firebug 雖然方便 但卻也能不費吹灰之力的盜走網站所有的css :mrgreen:

  • 7
    Arno Ruan (LV.177) // 2010.01.03 02:06

    聲音好有磁性喔~~~喔喔喔

  • 8
    muki (LV.1145) // 2010.01.03 10:16

    @ 香腸
    哈，其實這篇是懶得寫圖文，感覺Firebug用圖文會很不流暢，所以才考慮用影片。
    幸好沒被大家吐槽
    謝謝香腸啦:)

    @ 殺氣
    很感激對大家有些幫助。
    的確可以把css全部盜走，但我想創意還是盜不走的:P

    @ Arno Ruan
    我該高興嗎,,,,這個形容 :?:

  • 9
    漆器 (LV.20) // 2010.01.03 17:01

    美聲美聲

    經過富有磁性的美聲解釋過後，發現我只有用一小部分的功能。沒想到這麼強大，也有很多該小地方要注意。

    結論是聲音好獨特 :P

  • 10
    小晶 (LV.56) // 2010.01.03 20:02

    我只能說
    沒看這影片我不曉得這那麼好用
    感謝Muki

    聲音很...特別XDDDDD總覺得是感冒的聲音耶!!!!

  • 11
    SR (LV.7) // 2010.01.03 23:51

    認真的教學!
    值得推(雖然我不是這樣做網頁的)~

  • 12
    yoyo (LV.2) // 2010.01.04 11:33

    讚！
    火蟲在 Muki 手裡真是利器！
    看來我要重新搬出肥大的 Firefox 。

  • 13
    muki (LV.1145) // 2010.01.04 13:12

    @漆器
    我以為有用Firebug的人都會跟我這樣用欸~
    基本上這篇是想寫給沒用過的人XDDD
    聲音就獨特的難聽嘛(攤手

    @ 小晶
    哈哈，因為很沙啞所以像感冒是嗎

    @ SR
    對要改像pixnet blog的朋友來說真的很實用
    或是對想要參考別人css的人來說，這個更實用OTZ

    @yoyo
    聽說chrome也有firebug lite版，但我沒用chrome就是了

  • 14
    HeChian (LV.9) // 2010.01.06 09:52

    也可以加裝YSlow套件 ... 個人覺得那個蠻好用的

  • 15
    Xing (LV.4) // 2010.01.18 17:11

    Chrome有自带类似的功能，已经很强大了，我一直用那个。

  • 16
    flora (LV.1) // 2010.01.23 23:27

    教學的很清楚~很認真的看完XD

  • 17
    muki (LV.1145) // 2010.01.28 20:25

    @ HeChian
    我完全沒聽過.... :mrgreen:

    @ Xing
    我沒用chromeXD

    @flora
    謝謝阿^^

  • 18
    xiaoyafeng (LV.1) // 2010.05.18 21:46

    @Muki，能否給個地址讓我下載？ 身處海峽對岸，無法上youtube. 有事請call xyf.xiao@gmail.com 我是初學，還請留個mail地址方便請教 :cry: :cry: :cry: :cry:

  • 19
    muki (LV.1145) // 2010.05.19 11:25

    @xiaoyafeng
    安 我的mail有放在blog裡頭
    mukispace[a]gmail.com

    至於檔案，我不知道能不能上傳給你，好像還蠻大的:P
    我回家看看唷:)

  • 20
    WindWood (LV.1) // 2010.05.20 11:07

    教程做得很不错。不过我最近在Chrome上装了firebug lite，但是却不知道怎么调出见面来。能否介绍下么？

  • 21
    鼻涕男孩 (LV.1) // 2011.03.06 22:58

    哈哈～～很好聽也很清楚～～不知道影片是否可以讓我放在我的站上？謝謝囉～～（我還在蒐集資料中～站還沒開放）

    不過「站長架站10堂課」跟您與虛擬先生寫的那本wp，我都有買喔～～

    教學很豐富～～謝謝您啦

  • 22
    Simple Latte (LV.1) // 2011.06.22 11:24

    教學做得真棒！謝謝你~~ :D


    • LEAVE YOUR COMMENT:




      :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:


     
     
    字體大小： 小字型 12px大字型 15px
    ▲ back to top