firefox的console log功能

http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html

Firebug是網頁開發的利器，可以極大地提高工做效率。

可是，它不太容易上手。我曾經翻譯過一篇《Firebug入門指南》，介紹了一些基本用法。今天，繼續介紹它的高級用法。

===================================

Firebug控制檯詳解

做者：阮一峯

控制檯（Console）是Firebug的第一個面板，也是最重要的面板，主要做用是顯示網頁加載過程當中產生各種信息。

1、顯示信息的命令

Firebug內置一個console對象，提供5種方法，用來顯示信息。

最簡單的方法是console.log()，能夠用來取代alert()或document.write()。好比，在網頁腳本中使用console.log("Hello World")，加載時控制檯就會自動顯示以下內容。

另外，根據信息的不一樣性質，console對象還有4種顯示信息的方法，分別是通常信息console.info()、除錯信息console.debug()、警告提示console.warn()、錯誤提示console.error()。

好比，在網頁腳本中插入下面四行：

　　console.info("這是info");

　　console.debug("這是debug");

　　console.warn("這是warn");

　　console.error("這是error");

加載時，控制檯會顯示以下內容。

能夠看到，不一樣性質的信息前面有不一樣的圖標，而且每條信息後面都有超級連接，點擊後跳轉到網頁源碼的相應行。

2、佔位符

console對象的上面5種方法，均可以使用printf風格的佔位符。不過，佔位符的種類比較少，只支持字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）四種。

好比，

　　console.log("%d年%d月%d日",2011,3,26);

　　console.log("圓周率是%f",3.1415926);

%o佔位符，能夠用來查看一個對象內部狀況。好比，有這樣一個對象：

　　var dog = {} ;

　　dog.name = "大毛" ;

　　dog.color = "黃色";

而後，對它使用o%佔位符。

　　console.log("%o",dog);

3、分組顯示

若是信息太多，能夠分組顯示，用到的方法是console.group()和console.groupEnd()。

　　console.group("第一組信息");

　　　　console.log("第一組第一條");

　　　　console.log("第一組第二條");

　　console.groupEnd();

　　console.group("第二組信息");

　　　　console.log("第二組第一條");

　　　　console.log("第二組第二條");

　　console.groupEnd();

點擊組標題，該組信息會摺疊或展開。

4、console.dir()

console.dir()能夠顯示一個對象全部的屬性和方法。

好比，如今爲第二節的dog對象，添加一個bark()方法。

　　dog.bark = function(){alert("汪汪汪");};

而後，顯示該對象的內容，

　　console.dir(dog);

5、console.dirxml()

console.dirxml()用來顯示網頁的某個節點（node）所包含的html/xml代碼。

好比，先獲取一個表格節點，

　　var table = document.getElementById("table1");

而後，顯示該節點包含的代碼。

　　console.dirxml(table);

6、console.assert()

console.assert()用來判斷一個表達式或變量是否爲真。若是結果爲否，則在控制檯輸出一條相應信息，而且拋出一個異常。

好比，下面兩個判斷的結果都爲否。

　　var result = 0;

　　console.assert( result );

　　var year = 2000;

　　console.assert(year == 2011 );

7、console.trace()

console.trace()用來追蹤函數的調用軌跡。

好比，有一個加法器函數。

　　function add(a,b){

　　　　return a+b;

　　}

我想知道這個函數是如何被調用的，在其中加入console.trace()方法就能夠了。

　　function add(a,b){

　　　　console.trace();

　　　　return a+b;

　　}

假定這個函數的調用代碼以下：

　　var x = add3(1,1);

　　function add3(a,b){return add2(a,b);}

　　function add2(a,b){return add1(a,b);}

　　function add1(a,b){return add(a,b);}

運行後，會顯示add()的調用軌跡，從上到下依次爲add()、add1()、add2()、add3()。

8、計時功能

console.time()和console.timeEnd()，用來顯示代碼的運行時間。

　　console.time("計時器一");

　　for(var i=0;i<1000;i++){

　　　　for(var j=0;j<1000;j++){}

　　}

　　console.timeEnd("計時器一");

9、性能分析

性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()。

假定有一個函數Foo()，裏面調用了另外兩個函數funcA()和funcB()，其中funcA()調用10次，funcB()調用1次。

　　function Foo(){

　　　　for(var i=0;i<10;i++){funcA(1000);}

　　　　funcB(10000);

　　}

　　function funcA(count){

　　　　for(var i=0;i<count;i++){}

　　}

　　function funcB(count){

　　　　for(var i=0;i<count;i++){}

　　}

而後，就能夠分析Foo()的運行性能了。

　　console.profile('性能分析器一');

　　Foo();

　　console.profileEnd();

控制檯會顯示一張性能分析表，以下圖。

標題欄提示，一共運行了12個函數，共耗時2.656毫秒。其中funcA()運行10次，耗時1.391毫秒，最短運行時間0.123毫秒，最長0.284毫秒，平均0.139毫秒；funcB()運行1次，耗時1.229ms毫秒。

除了使用console.profile()方法，firebug還提供了一個"概況"（Profiler）按鈕。第一次點擊該按鈕，"性能分析"開始，你能夠對網頁進行某種操做（好比ajax操做），而後第二次點擊該按鈕，"性能分析"結束，該操做引起的全部運算就會進行性能分析。

10、屬性菜單

控制檯面板的名稱後面，有一個倒三角，點擊後會顯示屬性菜單。

默認狀況下，控制檯只顯示Javascript錯誤。若是選中Javascript警告、CSS錯誤、XML錯誤都送上，則相關的提示信息都會顯示。

這裏比較有用的是"顯示XMLHttpRequests"，也就是顯示ajax請求。選中之後，網頁的全部ajax請求，都會在控制檯面板顯示出來。

好比，點擊一個YUI示例，控制檯就會告訴咱們，它用ajax方式發出了一個GET請求，http請求和響應的頭信息和內容主體，也均可以看到。

[參考文獻]

* Firebug Tutorial - Logging, Profiling and CommandLine (Part I)

* Firebug Tutorial - Logging, Profiling and CommandLine (Part II)