|
|
我們測試一下把剛才的4個輸出作為一個分組輸出，修改代碼為：
復制代碼 代碼如下:
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();
刷新頁面看看結果（圖11-5）。在console.group中，我們還可以加入一個組標題“開始分組：”。如果需要，我們還可以通過嵌套的方式，在組內再分組。 
圖11-5
有時候，我們需要寫一個for循環列出一個對象的所有屬性或者某個HTML Element下的所有節點，有了firebug后，我們不需要再寫這個for循環了，我們只需要使用console.dir(object)或console.dirxml(element)就可以了。
在測試頁中加入代碼測試一下：
復制代碼 代碼如下:
console.dir(document.getElementById('div1'));
console.dirxml(document.getElementById('div1'));
結果請看圖11-6和圖11-7。
圖11-6 
圖11-7
是否想知道代碼的運行速度？很簡單，使用console.time和console.timeEnd就可以。
修改一下test函數的代碼，測試一下運行1000次循環需要多少時間：
復制代碼 代碼如下:
function test(){
console.time('test');
for(var i=0;i<1000;i++){
document.getElementById('div2').innerHTML=i;
//console.log('當前的參數是：%d',i);
}
console.timeEnd('test');
}
刷新頁面，單擊“方塊二”，看看結果（圖11-8）。在這里要注意的是console.time和console.timeEnd里的參數要一致才會有正確的輸出，而該參數就是信息的標題。 
圖11-8
是否想知道某個函數是從哪里調用的？console..trace可幫助我們進行追蹤。在test函數的結尾加入：
console.trace();
刷新頁面，單擊“方塊二”，看看結果（圖11-9）。結果顯示是在坐標（97，187）的鼠標單擊事件執行了test函數，而調用的腳本是在simple.html文件里的第1行。因為是在HTML里面的事件調用了test函數，所以顯示的行號是第1行。如果是腳本，則會顯示調用腳本的行號，通過單擊可以直接去到調用行。
圖11-9
如果想在腳本某個位置設置斷點，可以在腳本中輸入“debugger”作為一行。當腳本執行到這一行時會停止執行等待用戶操作，這時候可以通過切換到“Script”標簽對腳本進行調試。
Firebug還有其它的一些調試函數，這里就不一一做介紹，有興趣可以自己測試。表4是所有函數的列表：
函數 | 說明 |
| console.log(object[, object, ...]) | 向控制臺輸出一個信息。可以輸入多個參數，輸出將已空格分隔各參數輸出。 第一參數可以包含格式化文本，例如： console.log(‘這里有%d個%s',count,apple); 字符串格式： %s ：字符串。 %d, %i：數字。 %f： 浮點數。 %o -超鏈接對象。 |
console.debug(object[, object, ...]) | 向控制臺輸出一個信息，信息包含一個超鏈接鏈接到輸出位置。 |
console.info(object[, object, ...]) | 向控制臺輸出一個帶信息圖標和背景顏色的信息，信息包含一個超鏈接鏈接到輸出位置。 |
console.warn(object[, object, ...]) | 向控制臺輸出一個帶警告圖標和背景顏色的信息，信息包含一個超鏈接鏈接到輸出位置。 |
console.error(object[, object, ...]) | 向控制臺輸出一個帶錯誤圖標和背景顏色的信息，信息包含一個超鏈接鏈接到輸出位置。 |
console.assert(expression[, object, ...]) | 測試一個表示是否為true，如果為false，提交一個例外信息到控制臺。 |
console.dir(object) | 列出對象的所有屬性。 |
console.dirxml(node) | 列出HTML或XML Element的XML源樹。 |
console.trace() | 輸出堆棧的調用入口。 |
console.group(object[, object, ...]) | 將信息分組再輸出到控制臺。通過console.groupEnd()結束分組。 |
console.groupEnd() | 結束分組輸出。 |
console.time(name) | 創建一個名稱為name的計時器，計算代碼的執行時間，調用console.timeEnd(name)停止計時器并輸出執行時間。 |
console.timeEnd(name) | 停止名稱為name的計時器并輸出執行時間。 |
console.profile([title]) | 開始對腳本進行性能測試，title為測試標題。 |
console.profileEnd() | 結束性能測試。 |
console.count([title]) | 計算代碼的執行次數。titile作為輸出標題。 |
表4 | |
12、 在IE中使用Firebug
Firebug是Firefox的一個擴展，但是我習慣在IE中調試我的頁面怎么辦？如果在頁面腳本中加入console.log()將調試信息寫到Friebug，在IE中肯定是提示錯誤的，怎么辦？不用擔心，Frirebug提供了Frirbug Lite腳本，可以插入頁面中模仿Firebug控制臺。
我們可以從一下地址下載firebug lite：
http://www.getfirebug.com/releases/firebuglite1.0-b1.zip
然后在頁面中加入：
<script language="Javascript" type="text/Javascript" src="/路徑/firebug.js"></script>
如果你不想在IE中模仿Friebug控制臺，只是不希望console.log()腳本出現錯誤信息，那么在頁面中加入一下語句：
<script language="Javascript" type="text/Javascript" src="/路徑/firebugx.js"></script>
如果你不想安裝Firebug Lite，只是想避免腳本錯誤，那么可以在腳本中加入以下語句：
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鍵就可以打開控制臺了。每次頁面刷新后，你都要按F12鍵打開控制臺，是不是很煩？如果不想那么，就在html標簽中加入“debug='true'”，例如：
<html debug="true">
在Friebug Lite中也有命令行，但是功能沒那么強。
JavaScript技術：Javascript 調試利器 Firebug使用詳解六，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
