JavaScript之WEB開發調試利器:Firebug

　　1、概要介紹

　　Firebug是Firefox的一個插件，Firebug 和 firefox 整合在一塊兒，使你瀏覽網頁時手邊有了一套強大的網頁開發工具。你能夠編輯、調試和監控任何網頁上的 CSS、HTML 和 Javascript。並且能夠在線的時候修改dom很是彈大的插件.

　　怎麼說呢，強就一個字啦～NND，上面這個圖是我開到了 Ispect 狀態，鼠標移動時截下來的。這比看源文件而後再搜索但是方便的太多了，這個世界是怎麼了，還有這樣的雷峯存在，真是太BT了～

　　並且還能夠對AJAX進行Debug，跟蹤出錯信息，對當前網頁進行即時編輯(WYSIWYG)，CSS效果預覽等等，總之方便啊，好使啊，牛B啊，哈哈哈～

　　你們用一用就知道了m.mlyrx120.com

　　注:　Firebug　只是 Firefox的一下插件.必須安裝 Firefox　才能使用

　　把下載的文件解壓後把firebug1.0-current.xpi　拖入到Firefox　窗口就能夠安裝.

　　Firebug官方網站：http://getfirebug.com/

　　Firebug下載地址：http://addons.mozine.cn/firefox/531/

　　2、主要功能

　　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的調試功能，很是方便，能夠設置斷點，鼠標移至變量名上，能夠獲得相應值的提示。太棒了!

　　3、非Firefox瀏覽器的解決方案：Firebug Lite

　　對於非Firefox瀏覽器，Firebug也有相應的解決方案—Firebug Lite，經過使用console.log()輸出錯誤信息至Firebug 控制檯。

　　1.下載Firebug Lite

　　下載地址：http://getfirebug.com/releases/firebuglite1.0-b1.zip，解壓至WEB目錄，好比/js/firebug/。

　　在頁面中增長如下代碼：

　　若是不想安裝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 Litem.120hrb.com

　　默認狀況下，打開頁面後，能夠按F12開啓Firebug的控制檯，若是不想頻繁按F12來進入調試狀態，也可在HTML元素上增長　debug=」true」 ，以下：

　　3.使用命令行

　　Firebug也包含一個命令行程序，可使用如下快捷鍵Ctrl+Shift+L (or ⌘+Shift+L on Mac)

　　4.測試頁面

　　按 F12 或 Ctrl+Shift+L，就能夠看到效果了。