javascript工具--控制檯詳解（轉自 阮一峯博客）

大神這篇博客是寫在2011年，主要介紹 「Firefox」 瀏覽器插件 「Firebug」 的操做，現在主流瀏覽器對控制檯都已經提供了很好的支持。我本身用的最可能是谷歌的 「chrome」 瀏覽器，下面也用 「chrome」 瀏覽器來調試。

1、顯示信息的命令

console.log();  //控制檯輸入 網頁中不會輸出

console.info();  //通常信息

console.debug();  //除錯信息

console.warn();  //警告提示

console.error();  //錯誤提示

 

 「console.log();」 能夠用來取代 「alert();」 或 「document.write();」 好比，在網頁中寫入 「console.log("Hello World");」 而後會在控制檯輸入，可是網頁中並不會輸入。

咱們在代碼中插入以下代碼：

　　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();（顯示某一個對象的全部屬性和方法）

 

好比，如今爲第二節的dog對象，添加一個bark()方法，而後用 「dir();」 顯示出來：

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

　　console.dir( dog );

5、console.dirxml();（獲取某個節點所包含的全部html/xml代碼）

　　var table = document.getElementById("table1");  //獲取節點

　　console.dirxml( table );  //顯示節點的全部代碼

 

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

　　var result = 0;

　　console.assert( result );  //false

　　var year = 2000;

　　console.assert( year == 2011 );  //false

7、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請求和響應的頭信息和內容主體，也均可以看到。