在米隨隨的Blog看到有關Firebug的介紹,遂下載試用了一下,確實是比較好的工具。
二、主要功能
- Inspect and edit HTML
- Tweak CSS to perfection
- Visualize CSS metrics
- Monitor network activity
- Debug and profile JavaScript
- Quickly find errors
- Explore the DOM
- Execute JavaScript on the fly
- Logging for JavaScript
對于WEB開發人員來說,可以非常方便的得到自己想要的信息:HTML、DOM、CSS、JS,甚至各個文件的下載時間。
剛測試了一下JS的調試功能,非常方便,可以設置斷點,鼠標移至變量名上,可以得到相應值的提示。太棒了!
三、非Firefox瀏覽器的解決方案:Firebug Lite
對于非Firefox瀏覽器,Firebug也有相應的解決方案―Firebug Lite,通過使用console.log()輸出錯誤信息至Firebug 控制臺。
1.下載Firebug Lite
下載地址:http://getfirebug.com/releases/firebuglite1.0-b1.zip,解壓至WEB目錄,比如/js/firebug/。
在頁面中增加以下代碼:
- <script language="javascript" type="text/javascript"
- src="/path/to/firebug/firebug.js"></script>
如果不想安裝Firebug Lite,只是為了避免Javascript錯誤,可以點擊這里下載firebugx.js然后copy至代碼中即可。
這個文件的代碼如下:
- if (!("console" in window) || !("firebug" in console))
- {
- var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
- "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
- window.console = {};
- for (var i = 0; i < names.length; ++i)
- window.console[names[i]] = function() {}
- }
2.使用Firebug Lite
默認情況下,打開頁面后,可以按F12開啟Firebug的控制臺,如果不想頻繁按F12來進入調試狀態,也可在HTML元素上增加 debug=”true” ,如下:
- <html debug="true">
3.使用命令行
Firebug也包含一個命令行程序,可以使用以下快捷鍵Ctrl+Shift+L (or ⌘+Shift+L on Mac)
4.測試頁面
按 F12 或 Ctrl+Shift+L,就可以看到效果了。




















