一、Firebug工具簡介

firebug是firefox下的一款開發類插件。firebug集html查看和編輯，JavaScript控制台，網路狀況監視器於一體，是開發JavaScript，css，html和ajax的得力助手。

YSlow是插件。

二、Firebug應用

1、禁用標簽

下拉菜單啟用禁用標簽。

2、查看頁面元素快捷鍵

ctrl+shift+c快捷鍵

3、html編輯

雙擊元素或者右鍵“編輯HTML”進入編輯頁面，在編輯頁面再點"編輯"即可退出。

4、css字體大小

方向鍵 調1個單位

ctrl+方向鍵 調0.1個單位

shift+方向鍵調10個單位

5、評估頁面下載速度

網路標簽頁：可以看到請求的時間，大小，地點，和狀態。

200代表從伺服器完整載入。304代表未按預期修改文檔，所以從本地緩存載入。

點擊每個請求可以查看詳情詳情：包括請求頭，返回結果，cookie等。

6、Ajax監聽

網路面板下的XHR就是用來監聽ajax請求的。

輸入firebug，參數中wd就代表輸入的參數即firebug。

7、javascript控制台

7.1、點運行執行js代碼

右邊面板中輸入js代碼，點運行即可執行。

7.2控制台命令

控制台預置了很多命令。最常用的console.log()簡單的記錄日誌；此外還有

console.info()在消息前面顯示信息圖標。

console.debug()記錄調試信息。

console.warn()在消息前面顯示警告圖標。

console.error()在消息前面顯示錯誤圖標,並且附上行號的超鏈接。

這些命令會用不同的顏色和符號標識出來如下。

7.3tab鍵補全提醒

比如輸入con，按下tab鍵瀏覽器會給出提醒方便補全代碼。

7.4、4種占位符

如下輸出某年某月某日，%d代表整數。

有點類似c語言的格式化，控制台有4種占位符。

• %d 整數
• %f 浮點數
• %s 字元串
• %o 對象

應用：可以使用占位符格式化日誌輸出：

比如要輸出2016年04月22日，可以在月份前加上%s字元串占位符，這樣傳入參數也需要加引號如下。

7.5日誌多時歸類分組

使用console.group()和console.groupEnd()來分組。

7.6、console.dir()顯示一個對象的所有屬性和方法

console.dir(console);

dir顯示一個對象所有的屬性和方法,非常方便。

7.7、時間跟蹤

通過console.time()和console.timeEnd()記錄代碼運行時間，優化代碼和演算法。

但是我多次執行的實際耗時並不一樣。

7.8、js代碼調試

腳本中顯示所有的代碼，包括index.html和jquery代碼。

設置斷點，刷新頁面，當執行到斷點處的js代碼時，頁面不再執行，等待操作。

通過監控面板可以看變數值。

通過堆棧面板(Call true)點擊其中函數查看調用者。

通過斷點米娜包查看所有的斷點列表。

可以通過4個圖標來操作，從左到右分別是：繼續(F8)，單步進入(F11)，單步跳過(F10)，單步退出(shift+F11)。

 刪除斷點：

在斷點處單擊或者在斷點面板中取消勾選，或直接點右邊的紅色x刪除斷點。

通過console.trace()可以在控制台看出函數是怎樣被調用的。

<script type="text/javascript">
    $(document) .ready(function(){
        var el=$("h1 span").first();
        var i=9;

        var interval=setInterval(function(){

            console.trace();
            el.html(i);
            i--;
            if(i<0){
                clearInterval(interval);
            }
        },1000);
    });
</script>

通過概況可以進行簡單的性能分析。

刷新頁面，點擊概況，概況就在收集過程中，

頁面執行完再次點擊概況標簽標簽欄，就可以看到概況詳情。

可以看到interval()函數被調用了9次，占用時間等性能相關參數。

三、Firebug進階提示

• 點擊所有可以點擊的地方
• 點擊滑鼠右鍵
• 下拉菜單
• 主菜單

firebug插件的擴展，比如YSlow等，一個插件的擴展也代表了它的好壞。

開發人員工具配合firebug一起使用，有一些其他功能，比如響應式模式：

參考慕課網課程：http://www.imooc.com/learn/137

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/5416895.html有問題歡迎與我討論，共同進步。