網頁制作poluoluo文章簡介：Firebug一共有Console,HTML,CSS,Script,DOM,NET六個Tab，今天著重說一下Console的用法。
Firebug對於Web開發人員來說，已經成為了不可或缺的工具，但是在我日常的工作中，常常感覺還沒有能夠深刻的挖掘出她的潛力，今天花了點時間仔細研究了Console和命令行的使用在提高工作效率方面的作用，
記下來和大家分享一下.
Firebug一共有Console,HTML,CSS,Script,DOM,NET六個Tab，今天著重說一下Console的用法。
其實我們對於Console應該非常熟悉，因為這裡是Firebug給出各種信息的窗口，而這也正是Console的主要用途，日志記錄(Logging)。
除此之外，Console還提供了通過命令行方式來調試Javascript的方法。下面就來學習一下Console的用法。
1、Firefox的日志記錄(Logging in Firefox)。
通過Console的記錄方法，我們可以不再使用煩人的alert或者document.write方法來進行調試。
Firebug提供了五種日志的類型：
consle打印字符串支持字符串替換，使用起來就像c裡面的printf(“%s",a),支持的類型包括：
如果使用%o的話，對象就會用綠色的超鏈接表示出來，單擊後會將你帶到DOM視圖。
2、分組(Grouping)。
如果某一類的信息特別多時，分組就有利於邏輯的劃分。
使用上很簡單，參見代碼。
function consoleGroup(){
var groupname = "Group 1";
console.group("Message group %s", groupname);
console.log("This is the 1 message in %s", groupname);
console.log("This is the 2 message in %s", groupname);
console.log("This is the 3 message in %s", groupname);
console.groupEnd();
goupname = "Group 2";
console.group("Message group %s", goupname);
console.log("This is the 1 message in %s", goupname);
var subgroupname = "Sub group 1";
console.group("Message group %s",subgroupname);
console.log("This is the 1 message in %s", subgroupname);
console.log("This is the 2 message in %s", subgroupname);
console.log("This is the 3 message in %s", subgroupname);
console.groupEnd();
console.log("This is the 2 message in %s", goupname);
console.groupEnd();
}
3、console.dir和console.dirxml
console.dir可以將一個對象的所有方法和屬性打印出來，這個方法無疑是非常有用的，我們不再需要object.toString這樣的方法支持了，只要有firebug，查看對象也變得很輕松同時，我們也可以將頁面中的元素作為一個對象打印出來，但是你要小心，因為這將輸出眾多的信息，可能你會迷失在繁雜的信息中而找不到自己需要的條目。我們可以通過分組將這些大量的信息放入一個分組中，這樣可以在邏輯上更清楚一些。
function consoleDir(){
function Car(){
this.Model = "Old Model";
this.getManu = function(){
return "Toyota";
}
}
var objCar = new Car();
console.dir(objCar);
console.dir(zoo);
var groupname = "Css Style";
console.group("The button Style", groupname);
console.dir(document.getElementById('consoledir').style, groupname);
console.groupEnd();
}
console.dirxml 打印出HTML元素的XML表示形式.
網頁制作poluoluo文章簡介：Firebug一共有Console,HTML,CSS,Script,DOM,NET六個Tab，今天著重說一下Console的用法。
3、console.dir和console.dirxml
console.dir可以將一個對象的所有方法和屬性打印出來，這個方法無疑是非常有用的，我們不再需要object.toString這樣的方法支持了，只要有firebug，查看對象也變得很輕松同時，我們也可以將頁面中的元素作為一個對象打印出來，但是你要小心，因為這將輸出眾多的信息，可能你會迷失在繁雜的信息中而找不到自己需要的條目。我們可以通過分組將這些大量的信息放入一個分組中，這樣可以在邏輯上更清楚一些。
function consoleDir(){
function Car(){
this.Model = "Old Model";
this.getManu = function(){
return "Toyota";
}
}
var objCar = new Car();
console.dir(objCar);
console.dir(zoo);
var groupname = "Css Style";
console.group("The button Style", groupname);
console.dir(document.getElementById('consoledir').style, groupname);
console.groupEnd();
}
console.dirxml 打印出HTML元素的XML表示形式.
4、斷言(console.assert())。
console.assert()可以用來判斷一個表達式是否正確，如果錯誤，他就會打印錯誤信息在控制台窗口中。
5、追蹤(console.trace())。
console.trace()是一個非常有趣的功能。我們先來看看官方的解釋：打印Javascript執行時刻的堆棧追蹤。
這個函數可以打印出程序執行時從起點到終點的路徑信息。
比如如果我們想知道某個函數是何時和如何被執行的，我們將console.trace()放在這個函數中，我們就能夠的看到這個函數被執行的路徑。
這個函數在調試其他人的源代碼時非常有用。
6、計時(Timing)。
console.time(timeName)可以用來計時，這個在我們需要知道代碼執行效率的時候特別有用，就不用自己造輪子了。
function consoleTime(){
var timeName = "timer1";
console.time(timeName);
var a = 0;
for(var i = 0; i < 100; i++){
for(var j = 0; j < 100; j++){
// console.log('Hello world');
a = a + 1;
}
}
console.log("a = %d", a);
console.timeEnd(timeName);
}
網頁制作poluoluo文章簡介：Firebug一共有Console,HTML,CSS,Script,DOM,NET六個Tab，今天著重說一下Console的用法。
7、Javascript分析器(Javascript Profiler)。
我們可以通過代碼console.profile('profileName')或者單擊Profiler標簽來進行Javascript代碼執行的分析。這個功能有點類似於console.time()，可以幫助我們評估代碼的表現，但是能夠提供比console.time()更詳細的信息。
有三種方法可以調用Javascript profiler。一種是在代碼中寫入分析腳本，一種是單擊profile標簽，最後還可以在命令行下輸入命令來執行。
執行後，可以看到詳細的輸出結果，下面對各項進行一些說明：
8、其他的一些選項。
在Console Tab的最右側有一個Options的選項，在這裡可以自己定義需要顯示的錯誤，其內容很好理解，這裡就不多說了。有一點就是Firebug1.3以後，多了Show Chrome Errors、Show Chrome Message等幾個選項，這幾個選項還沒有驗證過其具體的作用，哪位知道的可以共享一下。
[參考資料]