Firebug中的console tab使用總結

作者：Cocowool 2009-05-12 13:54:59

開發(fā) 前端

Firebug對于Web開發(fā)人員來說，已經成為了不可或缺的工具，但是在我日常的工作中，常常感覺還沒有能夠深刻的挖掘出她的潛力，今天花了點時間仔細研究了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提供了五種日志的類型：

◆console.log:記錄一行信息，無任何圖標提示；

◆console.debug:記錄一行信息，帶超鏈接，可以鏈接到語句調用的地方；

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

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

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

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

%s string，字符串

%d,%i 整型

%f 浮點

%o 對象

如果使用%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表示形式.

4、斷言(console.assert())。

console.assert()可以用來判斷一個表達式是否正確，如果錯誤，他就會打印錯誤信息在控制臺窗口中。

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

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

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

6、計時(Timing)。

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

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

我們可以通過代碼console.profile('profileName')或者單擊Profiler標簽來進行Javascript代碼執(zhí)行的分析。這個功能有點類似于console.time()，可以幫助我們評估代碼的表現，但是能夠提供比console.time()更詳細的信息。

有三種方法可以調用Javascript profiler。一種是在代碼中寫入分析腳本，一種是單擊profile標簽，***還可以在命令行下輸入命令來執(zhí)行。執(zhí)行后，可以看到詳細的輸出結果，下面對各項進行一些說明：

Function Column：顯示調用的函數名稱；

Call Column：顯示調用次數；

Percent Column：顯示消耗的時間比；

Own Time：顯示函數內部語句執(zhí)行的時間，不包括調用其他函數的時間；

Time Column：顯示函數從開始到結束的執(zhí)行時間；

Avg Column：平均時間。Avg = Own / Call;

Min & Max Column：顯示最小和***時間；

File Column：函數所在的文件；

8、其他的一些選項。

在Console Tab的最右側有一個Options的選項，在這里可以自己定義需要顯示的錯誤，其內容很好理解，這里就不多說了。有一點就是Firebug1.3以后，多了Show Chrome Errors和Show Chrome Message
。

等幾個選項，這幾個選項還沒有驗證過其具體的作用，哪位知道的可以共享一下。

【編輯推薦】

如何在JavaScript函數內執(zhí)行全局代碼
JavaScript集成測試工具Test Swarm發(fā)布
征服RIA：基于JavaScript的Web客戶端開發(fā)

責任編輯：彭凡來源： cnblogs

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

Firebug中的console tab使用總結