javascript控制臺(tái)詳解

更新時(shí)間：2015年06月25日 10:43:08 投稿：hebedich

本文是寫在2011年，主要介紹 “Firefox” 瀏覽器插件 “Firebug” 的操作，如今主流瀏覽器對(duì)控制臺(tái)都已經(jīng)提供了很好的支持。我自己用的最多是谷歌的 “chrome” 瀏覽器，下面也用 “chrome” 瀏覽器來調(diào)試。

一、顯示信息的命令

console.log(); //控制臺(tái)輸入網(wǎng)頁中不會(huì)輸出

console.info(); //一般信息

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

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

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

“console.log();” 可以用來取代 “alert();” 或 “document.write();” 比如，在網(wǎng)頁中寫入 “console.log("Hello World");” 然后會(huì)在控制臺(tái)輸入，但是網(wǎng)頁中并不會(huì)輸入。

我們在代碼中插入如下代碼：

　　console.info( "這是info" );

　　console.debug( "這是debug" );

　　console.warn( "這是warn" );

　　console.error( "這是error" );

加載后打開控制臺(tái)會(huì)看到像下面這樣：

二、占位符

console對(duì)象的上面5種方法，都可以使用printf風(fēng)格的占位符。不過，占位符的種類比較少，只支持字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對(duì)象（%o）四種。比如：

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

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

%o占位符，可以用來查看一個(gè)對(duì)象內(nèi)部情況。比如，有這樣一個(gè)對(duì)象：

　　var dog = {} ;

　　dog.name = "大毛";

　　dog.color = "黃色";

然后，對(duì)它使用o%占位符：

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

三、分組顯示

console.group(); console.groupEnd(); （這兩個(gè)方法是成對(duì)使用的）
　　console.group("第一組信息");
　　　　console.log("第一組第一條");
　　　　console.log("第一組第二條");
　　console.groupEnd();
　　console.group("第二組信息");
　　　　console.log("第二組第一條");
　　　　console.log("第二組第二條");
　　console.groupEnd();

四、console.dir();（顯示某一個(gè)對(duì)象的所有屬性和方法）

比如，現(xiàn)在為第二節(jié)的dog對(duì)象，添加一個(gè)bark()方法，然后用 “dir();” 顯示出來：

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

　　console.dir( dog );

五、console.dirxml();（獲取某個(gè)節(jié)點(diǎn)所包含的所有html/xml代碼）

　　var table = document.getElementById("table1"); //獲取節(jié)點(diǎn)

　　console.dirxml( table ); //顯示節(jié)點(diǎn)的所有代碼

六、console.assert();（用來判斷一個(gè)表達(dá)式或變量是否為真。如果結(jié)果為否，則在控制臺(tái)輸出一條相應(yīng)信息，并且拋出一個(gè)異常）

　　var result = 0;

　　console.assert( result ); //false

　　var year = 2000;

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

七、console.trace();（用來追蹤函數(shù)的調(diào)用軌跡）

　　/*一個(gè)加法函數(shù)*/

　　function add( a,b ){

　　　　return a+b;

　　}

我想知道這個(gè)函數(shù)是如何被調(diào)用的，在其中加入console.trace()方法就可以了：

　　function add( a,b ){

　　　　console.trace();

　　　　return a+b;

　　}

假定這個(gè)函數(shù)的調(diào)用代碼如下：

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

運(yùn)行后，會(huì)顯示add()的調(diào)用軌跡，從上到下依次為add()、add1()、add2()、add3()

八、console.time();和console.timeEnd();（用來顯示代碼的運(yùn)行時(shí)間）

　　console.time( "計(jì)時(shí)器一" );

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

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

　　}

　　console.timeEnd( "計(jì)時(shí)器一" );

九、性能分析

性能分析（Profiler）就是分析程序各個(gè)部分的運(yùn)行時(shí)間，找出瓶頸所在，使用的方法是console.profile();

假定有一個(gè)函數(shù)Foo()，里面調(diào)用了另外兩個(gè)函數(shù)funcA()和funcB()，其中funcA()調(diào)用10次，funcB()調(diào)用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();” 的運(yùn)行性能：

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

　　Foo();

　　console.profileEnd();

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

除了使用 “console.profile();”方法，firebug還提供了一個(gè)"概況"（Profiler）按鈕。第一次點(diǎn)擊該按鈕，"性能分析"開始，你可以對(duì)網(wǎng)頁進(jìn)行某種操作（比如ajax操作），然后第二次點(diǎn)擊該按鈕，"性能分析"結(jié)束，該操作引發(fā)的所有運(yùn)算就會(huì)進(jìn)行性能分析。