快捷導(dǎo)航

Javascript 調(diào)試?yán)?Firebug使用詳解六

更新時(shí)間：2009年07月05日 00:55:09 作者：

有時(shí)候，為了更清楚方便的查看輸出信息，我們可能需要將一些調(diào)試信息進(jìn)行分組輸出，那么可以使用console.group來對(duì)信息進(jìn)行分組，在組信息輸出完成后用console.groupEnd結(jié)束分組。

我們測試一下把剛才的4個(gè)輸出作為一個(gè)分組輸出，修改代碼為：

復(fù)制代碼代碼如下:

console.group('開始分組：'); 
console.debug('This is console.debug!'); 
console.info('This is console.info!'); 
console.warn('This is console.warn!'); 
console.error('This is console.error!'); 
console.groupEnd(); 

刷新頁面看看結(jié)果（圖11-5）。在console.group中，我們還可以加入一個(gè)組標(biāo)題“開始分組：”。如果需要，我們還可以通過嵌套的方式，在組內(nèi)再分組。

圖11-5
有時(shí)候，我們需要寫一個(gè)for循環(huán)列出一個(gè)對(duì)象的所有屬性或者某個(gè)HTML Element下的所有節(jié)點(diǎn)，有了firebug后，我們不需要再寫這個(gè)for循環(huán)了，我們只需要使用console.dir(object)或console.dirxml(element)就可以了。
在測試頁中加入代碼測試一下：

復(fù)制代碼代碼如下:

console.dir(document.getElementById('div1')); 
console.dirxml(document.getElementById('div1')); 

結(jié)果請(qǐng)看圖11-6和圖11-7。

圖11-6

圖11-7
是否想知道代碼的運(yùn)行速度？很簡單，使用console.time和console.timeEnd就可以。
修改一下test函數(shù)的代碼，測試一下運(yùn)行1000次循環(huán)需要多少時(shí)間：

復(fù)制代碼代碼如下:

function test(){ 
console.time('test'); 
for(var i=0;i<1000;i++){ 
document.getElementById('div2').innerHTML=i; 
//console.log('當(dāng)前的參數(shù)是：%d',i); 
} 
console.timeEnd('test'); 
} 

刷新頁面，單擊“方塊二”，看看結(jié)果（圖11-8）。在這里要注意的是console.time和console.timeEnd里的參數(shù)要一致才會(huì)有正確的輸出，而該參數(shù)就是信息的標(biāo)題。

圖11-8
是否想知道某個(gè)函數(shù)是從哪里調(diào)用的？console..trace可幫助我們進(jìn)行追蹤。在test函數(shù)的結(jié)尾加入：
console.trace();
刷新頁面，單擊“方塊二”，看看結(jié)果（圖11-9）。結(jié)果顯示是在坐標(biāo)（97，187）的鼠標(biāo)單擊事件執(zhí)行了test函數(shù)，而調(diào)用的腳本是在simple.html文件里的第1行。因?yàn)槭窃贖TML里面的事件調(diào)用了test函數(shù)，所以顯示的行號(hào)是第1行。如果是腳本，則會(huì)顯示調(diào)用腳本的行號(hào)，通過單擊可以直接去到調(diào)用行。

圖11-9
如果想在腳本某個(gè)位置設(shè)置斷點(diǎn)，可以在腳本中輸入“debugger”作為一行。當(dāng)腳本執(zhí)行到這一行時(shí)會(huì)停止執(zhí)行等待用戶操作，這時(shí)候可以通過切換到“Script”標(biāo)簽對(duì)腳本進(jìn)行調(diào)試。
Firebug還有其它的一些調(diào)試函數(shù)，這里就不一一做介紹，有興趣可以自己測試。表4是所有函數(shù)的列表：

函數(shù)	說明
console.log(object[, object, ...])	向控制臺(tái)輸出一個(gè)信息。可以輸入多個(gè)參數(shù)，輸出將已空格分隔各參數(shù)輸出。第一參數(shù)可以包含格式化文本，例如： console.log(‘這里有%d個(gè)%s',count,apple); 字符串格式： %s ：字符串。 %d, %i：數(shù)字。 %f：浮點(diǎn)數(shù)。 %o -超鏈接對(duì)象。
console.debug(object[, object, ...])	向控制臺(tái)輸出一個(gè)信息，信息包含一個(gè)超鏈接鏈接到輸出位置。
console.info(object[, object, ...])	向控制臺(tái)輸出一個(gè)帶信息圖標(biāo)和背景顏色的信息，信息包含一個(gè)超鏈接鏈接到輸出位置。
console.warn(object[, object, ...])	向控制臺(tái)輸出一個(gè)帶警告圖標(biāo)和背景顏色的信息，信息包含一個(gè)超鏈接鏈接到輸出位置。
console.error(object[, object, ...])	向控制臺(tái)輸出一個(gè)帶錯(cuò)誤圖標(biāo)和背景顏色的信息，信息包含一個(gè)超鏈接鏈接到輸出位置。
console.assert(expression[, object, ...])	測試一個(gè)表示是否為true，如果為false，提交一個(gè)例外信息到控制臺(tái)。
console.dir(object)	列出對(duì)象的所有屬性。
console.dirxml(node)	列出HTML或XML Element的XML源樹。
console.trace()	輸出堆棧的調(diào)用入口。
console.group(object[, object, ...])	將信息分組再輸出到控制臺(tái)。通過console.groupEnd()結(jié)束分組。
console.groupEnd()	結(jié)束分組輸出。
console.time(name)	創(chuàng)建一個(gè)名稱為name的計(jì)時(shí)器，計(jì)算代碼的執(zhí)行時(shí)間，調(diào)用console.timeEnd(name)停止計(jì)時(shí)器并輸出執(zhí)行時(shí)間。
console.timeEnd(name)	停止名稱為name的計(jì)時(shí)器并輸出執(zhí)行時(shí)間。
console.profile([title])	開始對(duì)腳本進(jìn)行性能測試，title為測試標(biāo)題。
console.profileEnd()	結(jié)束性能測試。
console.count([title])	計(jì)算代碼的執(zhí)行次數(shù)。titile作為輸出標(biāo)題。
表4

12、在IE中使用Firebug
Firebug是Firefox的一個(gè)擴(kuò)展，但是我習(xí)慣在IE中調(diào)試我的頁面怎么辦？如果在頁面腳本中加入console.log()將調(diào)試信息寫到Friebug，在IE中肯定是提示錯(cuò)誤的，怎么辦？不用擔(dān)心，F(xiàn)rirebug提供了Frirbug Lite腳本，可以插入頁面中模仿Firebug控制臺(tái)。
我們可以從一下地址下載firebug lite：
http://www.getfirebug.com/releases/firebuglite1.0-b1.zip
然后在頁面中加入：
<script language="javascript" type="text/javascript" src="/路徑/firebug.js"></script>
如果你不想在IE中模仿Friebug控制臺(tái)，只是不希望console.log()腳本出現(xiàn)錯(cuò)誤信息，那么在頁面中加入一下語句：
<script language="javascript" type="text/javascript" src="/路徑/firebugx.js"></script>
如果你不想安裝Firebug Lite，只是想避免腳本錯(cuò)誤，那么可以在腳本中加入以下語句：
if (!window.console || !console.firebug)
{
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() {}
}
我們將firebug.js加入到測試頁面中，然后打開IE，加載頁面。頁面加載完成后，我們按下F12鍵就可以打開控制臺(tái)了。每次頁面刷新后，你都要按F12鍵打開控制臺(tái)，是不是很煩？如果不想那么，就在html標(biāo)簽中加入“debug='true'”，例如：
<html debug="true">
在Friebug Lite中也有命令行，但是功能沒那么強(qiáng)。

您可能感興趣的文章: