[Firefox Add-ons] 即時顯示 HTML/CSS 修改結果 – Firebug

Firebug 這隻擴充套件向來以強大的 JavaScript 除錯功能著稱,不過我不懂 JavaScript,所以就來介紹同樣是 Firebug 具有的強大 HTML 及 CSS 即時檢視和編輯功能,很適合在修改網頁樣式時使用,即使對 HTML 或是 CSS 不熟的人也很能快的了解其架構並加以修改。

Firebu 的相關資訊:

安裝完 Firebug 後,在 Firefox 的狀態列會有一個綠色圓圈裡面有個勾的小圖示,按下它就會顯示 Firebug 的功能視窗,下面會依照 Firebug 的介面抓圖做一個簡單的簡說:

  1. 按下 Firebug 的 Inspect 時,網頁的所有元素都會變成可框選狀態,只要把游標停在某個元素上,就會出現藍色的框線,這時只要按一下就可以開始檢視該元素的原始碼。
    fire_bug_css_04 (by joaoko)
  2. 即時檢視/修改 HTML 及 CSS,這項功能會清楚地顯示 HTML 的架構,每一個節點 (或稱元素) 都是可以擴展或縮回的,當按下有套用 CSS 樣式的元素時便會在右邊的分頁顯示 CSS 樣式。
    重點來了,這時 CSS 的屬性及參數是可以隨意的修改,並且會在網頁上即時顯示修改後的的結果。
    如果不想套用某個屬性的話,可以在屬性的左邊按一下,這時就會關閉該屬性,結果同樣會即時顯示出來。
    相反地,如果想增加某個屬性的話,只要在右邊空白的地方按兩下就可以輸入 CSS 的屬性及參數,這時 Firebug 還會很貼心的幫忙自動完成輸入。
    fire_bug_css_01 (by joaoko)
  3. 在 HTML 原始碼上按右鍵時,能複製該段 HTML 或是 XPath,甚至是修改或刪除。
    fire_bug_css_05 (by joaoko)
  4. 當把游標停在 CSS 屬性指定的圖片或是色碼時會顯示該圖片或顏色的預覽,若是圖片的話還會顯示其尺寸,能幫助設計者判斷是否需要修改其他屬性。
    fire_bug_css_06 (by joaoko)
  5. 在 CSS 樣式的分頁裡會完整的顯示繼承關係,當有某個屬性被劃上刪除線時則代表該屬性沒有被繼承到。
    fire_bug_css_07 (by joaoko)
  6. Box Model 示意圖,能完整的顯示邊距 (margin)、邊框 (border) 及內距 (padding) 的數值,只要在數字上按一下同樣可以修改,並即時顯示修改後的結果。
    fire_bug_css_02 (by joaoko)
  7. Firebug 還提供了網路監控功能,當載入網頁時,Firebug 會即時顯示所有載入的檔案的和載入時所花費的時間。
    fire_bug_css_03 (by joaoko)

21 thoughts on “[Firefox Add-ons] 即時顯示 HTML/CSS 修改結果 – Firebug

  1. 您好
    我也安裝了firebug
    但我發現自己不喜歡那塊編輯區域
    移除了firebug後,那塊區域卻沒有消失

    請問您知道怎麼移除那塊區域嗎?

  2. hikawac 你好!

    照理說編輯區域只有在啟動 Firebug 並且按下 statusbar 的綠色鈕才會出現,你說你把 firebug 移除後編輯區域沒有消失這就很奇怪了。
    你可以嘗試重新安裝 Firebug 再移除掉看看是否能解決問題。

  3. 看見你的情形應屬傳說中的灰底紅字錯誤畫面,可參考這篇:網址

    依照你先前的描述來看,應該是 Firebug 安裝不正確所導致,也有可能是 Firebug 與另一個擴充套件相衝突。

    建議你到 Add-ons 的網頁重新安裝 Firebug,然後再正確移除 (從 Firefox 的工具 -> 附加元件 移除)。

    若還是沒有解決的話那就可能不只是 Firebug 的問題,這時就必需一個套件一個套件停用,然後發現是那個套件在搞鬼。

  4. 如果你能回報後續狀況的話那是最好不過
    因為將經驗分享出來說不定能幫助將來遇到同樣問題的人 🙂

  5. 如果修改好後,要如何儲存呢?
    之前改好後,到CSS一看他還是都沒變,不小心在CSS那儲存,結果又變回原來設定的那樣

    請問要怎麼儲存呢? 還是要直接把修改好的CSS全部複製到網誌的CSS裡呢?

    不好意思 ..小妹太笨

  6. 劉小妹你好!

    Firebug 僅提供預覽修改後的結果,並不能直接修改儲存在伺服器端的 CSS 檔案。
    所以正確的做法是用 Firebug 找到想要修改的地方,然後再到後台去修改 CSS。

  7. 我真的不得不說一句話,您的這個站和幾個推薦的 add-ons,真的是… 真的是… 真的是… 太棒啦,我剛在學寫 css,我又是firefox的愛用者,這個功能真的是太強了。太感謝你了 。 你的站真的很棒喔 ^^

  8. 發掘實用的擴充套件一是是我的興趣之一。
    感謝 borjang 的鼓勵,歡迎以後常來 🙂

    PS. 你的個人網頁設計得很不錯喔 !

  9. 我想問 我安裝這個之後即時安人家狀態不能連 出現參數錯誤
    要怎麼辦

  10. 請問可以從firebug裡找到後台檔案的存放位置嗎?
    從firebug修改成自已想要的網頁,可是找不到後台檔案的位置
    所以修改完成後離開又回到原來的網頁。
    謝謝

  11. 我也有同样的困惑:

    請問可以從firebug裡找到後台檔案的存放位置嗎?
    從firebug修改成自已想要的網頁,可是找不到後台檔案的位置

    谢谢了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *