JS firebug小技巧

實際上前端的發展與進步也離不開瀏覽器的支持，而對於開發者來說，瀏覽器最好的支持，就是對於debug的良好支持，甚至在某些興許接手的項目中，前端的debug甚至可以解決好多問題……不說了，都是淚啊！仍是說下firefox下的firebug吧。儘管ff內置一個調試的功能，但是，感受不無缺，對於開發者來說，根本不夠用，因而ff下仍是推薦firebug，老牌的前端debug工具，好用！而IE、Chrome都有很是不錯的工具支持，基本夠用，但是用慣了ff的我，仍是堅挺在firebug下。

一、使用「debugger」keyword高速斷點調試

正常假設咱們想debugger下js代碼，先進入「腳本」面板，而後找到要調試的js文件，最後在你需要調試的行，打上斷點，最後刷新頁面，例如如下圖：

有沒有更高速的斷點方式呢？那就是使用「debugger」keyword高速斷點調試，接着往下看。
在你要調試的代碼行前面，加一行」debugger;」，
而後刷新下頁面。斷到點了！是否是很是方便，你無須再切換到腳本，再花心思找相應的調試腳本，這裏咱們僅僅需要加個debugger;就能夠，放心，腳本不會報錯，固然你正式公佈腳本的時候，務必把debugger;keyword去掉哦。

二、高速定位指定行的代碼

比方我要高速定位到第122行的代碼，你可以例如如下操做。
在搜索框上輸入「#122」，就可以找到指定行的代碼了！在我所使用的firebug1.12.8中，右上角的搜索欄有灰色的文字描寫敘述說明哦。

三、僅僅顯示起做用的css屬性

這功能說實話，怎麼說呢，有時候看起來不那麼痛苦吧！

要否則右側一堆刪除號，感受有點亂。

當勾選第一項「僅顯示應用的樣式」時，僅僅顯示起做用的樣式，未起做用的樣式會被忽略掉，再也不顯示的（對於debug這個選項各有利弊，看我的狀況）。

四、怎樣查看hover的css屬性
加了hover屬性的容器，鼠標滑過，在HTML面板右側會出現hover屬性，但你移開就沒有了，假設你但願在面板中保留hover屬性，看下圖：

選中「:hover」就能夠。

五、循環體內的特例調試

調試循環體，有個很是杯具的地方，在循環內部打個斷點，循環20次，會觸發20次斷點……這很是愁人，影響調試效率，事實上咱們僅僅需要調試循環第2次的狀況。

右擊斷點處，會出現一個藍色的彈出層，讓你輸入監控表達式，這時候輸入i == 2，再按「F8」，你就會發現直接跳到第二次循環了。

六、向控制檯輸出日記消息

在你的代碼上輸出個「36ria.com」，例如如下：
1.    console.log('36ria.com');
2.    console.error('36ria.com');
使用console.log的效率，我的認爲仍是比原始的alert()來的高的，關鍵是console.log()不會中斷程序運行。

七、利用命名行工具，高速定位對象

我的感受這是最實用的功能之中的一個。好多時候，經過這東西，馬上就能看到想看的內容。

直接在命令行輸入某個變量的變量名，可以在控制檯看到當中具體的信息。