一、Firebug工具簡(jiǎn)介

firebug是firefox下的一款開發(fā)類插件。firebug集html查看和編輯，JavaScript控制臺(tái)，網(wǎng)絡(luò)狀況監(jiān)視器于一體，是開發(fā)JavaScript，css，html和ajax的得力助手。

YSlow是插件。

二、Firebug應(yīng)用

1、禁用標(biāo)簽

下拉菜單啟用禁用標(biāo)簽。

2、查看頁(yè)面元素快捷鍵

ctrl+shift+c快捷鍵

3、html編輯

雙擊元素或者右鍵“編輯HTML”進(jìn)入編輯頁(yè)面，在編輯頁(yè)面再點(diǎn)"編輯"即可退出。

4、css字體大小

方向鍵 調(diào)1個(gè)單位

ctrl+方向鍵 調(diào)0.1個(gè)單位

shift+方向鍵調(diào)10個(gè)單位

5、評(píng)估頁(yè)面下載速度

網(wǎng)絡(luò)標(biāo)簽頁(yè)：可以看到請(qǐng)求的時(shí)間，大小，地點(diǎn)，和狀態(tài)。

200代表從服務(wù)器完整加載。304代表未按預(yù)期修改文檔，所以從本地緩存加載。

點(diǎn)擊每個(gè)請(qǐng)求可以查看詳情詳情：包括請(qǐng)求頭，返回結(jié)果，cookie等。

6、Ajax監(jiān)聽

網(wǎng)絡(luò)面板下的XHR就是用來(lái)監(jiān)聽ajax請(qǐng)求的。

輸入firebug，參數(shù)中wd就代表輸入的參數(shù)即firebug。

7、javascript控制臺(tái)

7.1、點(diǎn)運(yùn)行執(zhí)行js代碼

右邊面板中輸入js代碼，點(diǎn)運(yùn)行即可執(zhí)行。

7.2控制臺(tái)命令

控制臺(tái)預(yù)置了很多命令。最常用的console.log()簡(jiǎn)單的記錄日志；此外還有

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

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

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

console.error()在消息前面顯示錯(cuò)誤圖標(biāo),并且附上行號(hào)的超鏈接。

這些命令會(huì)用不同的顏色和符號(hào)標(biāo)識(shí)出來(lái)如下。

7.3tab鍵補(bǔ)全提醒

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

7.4、4種占位符

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

有點(diǎn)類似c語(yǔ)言的格式化，控制臺(tái)有4種占位符。

• %d 整數(shù)
• %f 浮點(diǎn)數(shù)
• %s 字符串
• %o 對(duì)象

應(yīng)用：可以使用占位符格式化日志輸出：

比如要輸出2016年04月22日，可以在月份前加上%s字符串占位符，這樣傳入?yún)?shù)也需要加引號(hào)如下。

7.5日志多時(shí)歸類分組

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

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

console.dir(console);

dir顯示一個(gè)對(duì)象所有的屬性和方法,非常方便。

7.7、時(shí)間跟蹤

通過(guò)console.time()和console.timeEnd()記錄代碼運(yùn)行時(shí)間，優(yōu)化代碼和算法。

但是我多次執(zhí)行的實(shí)際耗時(shí)并不一樣。

7.8、js代碼調(diào)試

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

設(shè)置斷點(diǎn)，刷新頁(yè)面，當(dāng)執(zhí)行到斷點(diǎn)處的js代碼時(shí)，頁(yè)面不再執(zhí)行，等待操作。

通過(guò)監(jiān)控面板可以看變量值。

通過(guò)堆棧面板(Call true)點(diǎn)擊其中函數(shù)查看調(diào)用者。

通過(guò)斷點(diǎn)米娜包查看所有的斷點(diǎn)列表。

可以通過(guò)4個(gè)圖標(biāo)來(lái)操作，從左到右分別是：繼續(xù)(F8)，單步進(jìn)入(F11)，單步跳過(guò)(F10)，單步退出(shift+F11)。

?刪除斷點(diǎn)：

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

通過(guò)console.trace()可以在控制臺(tái)看出函數(shù)是怎樣被調(diào)用的。

<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>

通過(guò)概況可以進(jìn)行簡(jiǎn)單的性能分析。

刷新頁(yè)面，點(diǎn)擊概況，概況就在收集過(guò)程中，

頁(yè)面執(zhí)行完再次點(diǎn)擊概況標(biāo)簽標(biāo)簽欄，就可以看到概況詳情。

可以看到interval()函數(shù)被調(diào)用了9次，占用時(shí)間等性能相關(guān)參數(shù)。

三、Firebug進(jìn)階提示

• 點(diǎn)擊所有可以點(diǎn)擊的地方
• 點(diǎn)擊鼠標(biāo)右鍵
• 下拉菜單
• 主菜單

firebug插件的擴(kuò)展，比如YSlow等，一個(gè)插件的擴(kuò)展也代表了它的好壞。

開發(fā)人員工具配合firebug一起使用，有一些其他功能，比如響應(yīng)式模式：

?

參考慕課網(wǎng)課程：http://www.imooc.com/learn/137

?

本文作者starof,因知識(shí)本身在變化，作者也在不斷學(xué)習(xí)成長(zhǎng)，文章內(nèi)容也不定時(shí)更新，為避免誤導(dǎo)讀者，方便追根溯源，請(qǐng)諸位轉(zhuǎn)載注明出處：http://www.cnblogs.com/starof/p/5416895.html有問(wèn)題歡迎與我討論，共同進(jìn)步。

?

轉(zhuǎn)載于:https://www.cnblogs.com/starof/p/5416895.html

總結(jié)

以上是生活随笔為你收集整理的工欲善其事必先利其器——web调试工具firebug的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。