一、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有問題歡迎與我討論，共同進步。