文章發佈於Sevendesign,如需轉貼請保留本訊息,並註明原文連結
原文連結:http://sevendesign1230.pixnet.net/blog/post/2775513

Firebug是Firefox 的一個附加元件,是一能即時監控 HTML、CSS 和 JavaScript 等的網站開發工具。用戶可以利用它除錯、編輯、甚至刪改任何網站的 CSS、HTML、DOM、與 JavaScript 代碼。Firebug 能讓用戶在修改網站任何一個元素時,能立即看到執行成果(有所見即所得的味道),加上它會很貼心的幫你檢查錯誤,著實替用戶省了不少氣力。以下教程將針對HTML與CSS標籤項目進行探討,不盡完善之處請詳見官方介紹。

官網:http://getfirebug.com/
元件連結:https://addons.mozilla.org/zh-TW/firefox/addon/1843
參考網站:http://www.evotech.net/blog/2007/06/introduction-to-firebug/

 

首先請點連結https://addons.mozilla.org/zh-TW/firefox/addon/1843安裝附加元件

Firebug

安裝完後重新啟動,並點選右下方螢火蟲圖示即可執行(或按F12啟動)

Firebug

 

※HTML開發
Firebug可以讓您簡單地找到頁面內的HTML元素,一但找到你要的,Firebug將提供您豐富的信息,並可讓您靈活編輯HTML。

Firebug

觀察元素功能:此功能可以由頁面呈現出來的東西,找到對應的標籤。

Firebug

也可以使用搜尋,搜尋需要的文字或是HTML內的元素名稱,以下範例是搜尋banner。

Firebug

 

※CSS開發
Firebug的CSS標籤項目,將會告訴你所有你在網頁上所看到的CSS樣式,如果你需要修改的地方,告訴你,改完之後您將可以立即看到他的變化!
當你的鼠標在顏色和圖片網址內的CSS選項卡上,一個方便的小工具提示會顯示預覽的顏色或圖像。該圖像還顯示提示你的尺寸的圖像文件,它可以節省大量時間。

Firebug

如果你還在學習的CSS,Firebug是一個功能強大的工具並擁有完整的CSS關鍵字詞典。在編輯一個CSS屬性,可以使用向上和向下箭頭鍵去選擇所有可能的屬性(其屬性按字母順序排列)。

Firebug

Firebug的css項目還有一個功能,就是能暫時隱藏屬性,來進行某些CSS的測試。

Firebug

Seven 發表在 痞客邦 PIXNET 留言(0) 人氣()