Firebug一共有Console,HTML,CSS,Script,DOM,NET六個(gè)Tab，今天著重說(shuō)一下Console的用法。

其實(shí)我們對(duì)于Console應(yīng)該非常熟悉，因?yàn)檫@里是Firebug給出各種信息的窗口，而這也正是Console的主要用途，日志記錄(Logging)。

除此之外，Console還提供了通過(guò)命令行方式來(lái)調(diào)試Javascript的方法。下面就來(lái)學(xué)習(xí)一下Console的用法。

1、Firefox的日志記錄(Logging in Firefox)。

通過(guò)Console的記錄方法，我們可以不再使用煩人的alert或者document.write方法來(lái)進(jìn)行調(diào)試。Firebug提供了五種日志的類型：

◆console.log:記錄一行信息，無(wú)任何圖標(biāo)提示；

◆console.debug:記錄一行信息，帶超鏈接，可以鏈接到語(yǔ)句調(diào)用的地方；

◆console.error():向控制臺(tái)中寫入錯(cuò)誤信息，帶錯(cuò)誤圖標(biāo)顯示和高亮代碼鏈接；

◆console.info():向控制臺(tái)中寫入提示信息，帶信息圖標(biāo)顯示和高亮代碼鏈接；

◆console.warn():向控制臺(tái)中寫入警告信息，帶警告圖標(biāo)顯示和高亮代碼鏈接；

consle打印字符串支持字符串替換，使用起來(lái)就像c里面的printf(“%s",a),支持的類型包括：

%s        string，字符串

%d,%i    整型

%f        浮點(diǎn)

 %o        對(duì)象

如果使用%o的話，對(duì)象就會(huì)用綠色的超鏈接表示出來(lái)，單擊后會(huì)將你帶到DOM視圖。

2、分組(Grouping)。

如果某一類的信息特別多時(shí)，分組就有利于邏輯的劃分。使用上很簡(jiǎn)單，參見(jiàn)代碼。

            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可以將一個(gè)對(duì)象的所有方法和屬性打印出來(lái)，這個(gè)方法無(wú)疑是非常有用的，我們不再需要object.toString這樣的方法支持了，只要有firebug，查看對(duì)象也變得很輕松。

同時(shí)，我們也可以將頁(yè)面中的元素作為一個(gè)對(duì)象打印出來(lái)，但是你要小心，因?yàn)檫@將輸出眾多的信息，可能你會(huì)迷失在繁雜的信息中而找不到自己需要的條目。

我們可以通過(guò)分組將這些大量的信息放入一個(gè)分組中，這樣可以在邏輯上更清楚一些。

            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()可以用來(lái)判斷一個(gè)表達(dá)式是否正確，如果錯(cuò)誤，他就會(huì)打印錯(cuò)誤信息在控制臺(tái)窗口中。

5、追蹤(console.trace())。

console.trace()是一個(gè)非常有趣的功能。我們先來(lái)看看官方的解釋：打印Javascript執(zhí)行時(shí)刻的堆棧追蹤。

這個(gè)函數(shù)可以打印出程序執(zhí)行時(shí)從起點(diǎn)到終點(diǎn)的路徑信息。比如如果我們想知道某個(gè)函數(shù)是何時(shí)和如何被執(zhí)行的，我們將console.trace()放在這個(gè)函數(shù)中，我們就能夠的看到這個(gè)函數(shù)被執(zhí)行的路徑。這個(gè)函數(shù)在調(diào)試其他人的源代碼時(shí)非常有用。    

6、計(jì)時(shí)(Timing)。

console.time(timeName)可以用來(lái)計(jì)時(shí)，這個(gè)在我們需要知道代碼執(zhí)行效率的時(shí)候特別有用，就不用自己造輪子了。

            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);
            }

7、Javascript分析器(Javascript Profiler)。

我們可以通過(guò)代碼console.profile('profileName')或者單擊Profiler標(biāo)簽來(lái)進(jìn)行Javascript代碼執(zhí)行的分析。這個(gè)功能有點(diǎn)類似于console.time()，可以幫助我們?cè)u(píng)估代碼的表現(xiàn)，但是能夠提供比console.time()更詳細(xì)的信息。

有三種方法可以調(diào)用Javascript profiler。一種是在代碼中寫入分析腳本，一種是單擊profile標(biāo)簽，***還可以在命令行下輸入命令來(lái)執(zhí)行。執(zhí)行后，可以看到詳細(xì)的輸出結(jié)果，下面對(duì)各項(xiàng)進(jìn)行一些說(shuō)明：

Function Column：顯示調(diào)用的函數(shù)名稱；

Call Column：顯示調(diào)用次數(shù)；

Percent Column：顯示消耗的時(shí)間比；

Own Time：顯示函數(shù)內(nèi)部語(yǔ)句執(zhí)行的時(shí)間，不包括調(diào)用其他函數(shù)的時(shí)間；

Time Column：顯示函數(shù)從開(kāi)始到結(jié)束的執(zhí)行時(shí)間；

Avg Column：平均時(shí)間。Avg = Own / Call;

Min & Max Column：顯示最小和***時(shí)間；

File Column：函數(shù)所在的文件；    

8、其他的一些選項(xiàng)。

在Console Tab的最右側(cè)有一個(gè)Options的選項(xiàng)，在這里可以自己定義需要顯示的錯(cuò)誤，其內(nèi)容很好理解，這里就不多說(shuō)了。有一點(diǎn)就是Firebug1.3以后，多了Show Chrome Errors和Show Chrome Message
。

等幾個(gè)選項(xiàng)，這幾個(gè)選項(xiàng)還沒(méi)有驗(yàn)證過(guò)其具體的作用，哪位知道的可以共享一下。

【編輯推薦】

1. 如何在JavaScript函數(shù)內(nèi)執(zhí)行全局代碼
2. JavaScript集成測(cè)試工具Test Swarm發(fā)布
3. 征服RIA：基于JavaScript的Web客戶端開(kāi)發(fā)