Firebug的Console的用法

 

網頁製做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的用法。

一、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視圖。

二、分組(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();
}

三、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表示形式.

三、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表示形式.

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

console.assert()能夠用來判斷一個表達式是否正確，若是錯誤，他就會打印錯誤信息在控制檯窗口中。

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

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

這個函數能夠打印出程序執行時從起點到終點的路徑信息。

好比若是咱們想知道某個函數是什麼時候和如何被執行的，咱們將console.trace()放在這個函數中，咱們就可以的看到這個函數被執行的路徑。

這個函數在調試其餘人的源代碼時很是有用。    

六、計時(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);
            }

七、Javascript分析器(Javascript Profiler)。

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

有三種方法能夠調用Javascript profiler。一種是在代碼中寫入分析腳本，一種是單擊profile標籤，最後還能夠在命令行下輸入命令來執行。

執行後，能夠看到詳細的輸出結果，下面對各項進行一些說明：

Function Column：顯示調用的函數名稱； Call Column：顯示調用次數； Percent Column：顯示消耗的時間比； Own Time：顯示函數內部語句執行的時間，不包括調用其餘函數的時間； Time Column：顯示函數從開始到結束的執行時間； Avg Column：平均時間。Avg = Own / Call; Min & Max Column：顯示最小和最大時間； File Column：函數所在的文件；    

八、其餘的一些選項。

在Console Tab的最右側有一個Options的選項，在這裏能夠本身定義須要顯示的錯誤，其內容很好理解，這裏就很少說了。有一點就是Firebug1.3之後，多了Show Chrome Errors、Show Chrome Message等幾個選項，這幾個選項尚未驗證過其具體的做用，哪位知道的能夠共享一下。

[參考資料]

Firebug Tutorial
http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i Firebug Tutorial    
http://michaelsync.net/2007/09/10/firebug-tutorial-logging-profiling-and-commandline-part-ii

轉載請註明:破洛洛

閱讀全文
類別： Javascript  查看評論