九個Console命令，讓js調試更簡單

九個Console命令，讓js調試更簡單

一、顯示資訊的命令

   1: 

   2: 

   3: 

   4:     

   5:     

   6: 

   7: 

   8:     <script type=text/javascript>

   9:         console.log('hello');

  10:         console.info('資訊');

  11:         console.error('錯誤');

  12:         console.warn('警告');

  13:     </script>

  14: 

  15: 

最常用的就是console.log了。

 

二：預留位置

console上述的集中度支援printf的預留位置格式，支援的預留位置有：字元（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）

   1: <script type=text/javascript>

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

   3: </script>

效果：

 

三、資訊分組

   1: 

   2: 

   3: 

   4:     

   5:     

   6: 

   7: 

   8:     <script type=text/javascript>

   9:         console.group(第一組資訊);

  10:

  11:     　　　　console.log(第一組第一條:我的部落格(http://www.ido321.com));

  12:

  13:     　　　　console.log(第一組第二條:CSDN(http://blog.csdn.net/u011043843));

  14:

  15:     　　console.groupEnd();

  16:

  17: 　　    console.group(第二組資訊);

  18:

  19:     　　　　console.log(第二組第一條:程式愛好者QQ群： 259280570);

  20:

  21:     　　　　console.log(第二組第二條:歡迎你加入);

  22:

  23: 　　    console.groupEnd();

  24:     </script>

  25: 

  26: 

效果：

 

四、查看對象的資訊

console.dir()可以顯示一個對象所有的屬性和方法。

   1: <script type=text/javascript>

   2:         var info = {

   3:             blog:http://www.ido321.com,

   4:             QQGroup:259280570,

   5:             message:程式愛好者歡迎你的加入

   6:         };

   7:         console.dir(info);

   8: </script>

效果：

 

五、顯示某個節點的內容

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

   1: 

   2: 

   3: 

   4:     

   5:     

   6: 

   7: 

   8:     

 

   9:         

我的部落格：www.ido321.com

  10:         

程式愛好者:259280570,歡迎你的加入

  11:     

  12:     <script type=text/javascript>

  13:         var info = document.getElementById('info');

  14:         console.dirxml(info);

  15:     </script>

  16: 

  17: 

效果：

 

六、判斷變數是否是真

console.assert()用來判斷一個運算式或變數是否為真。如果結果為否，則在控制台輸出一條相應資訊，並且拋出一個異常。

   1: <script type=text/javascript>

   2:     　　var result = 1;

   3:     　　console.assert( result );

   4:     　　var year = 2014;

   5:     　　console.assert(year == 2018 );

   6: </script>

1是非0值，是真；而第二個判斷是假，在控制台顯示錯誤資訊

 

七、追蹤函數的調用軌跡。

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

   1: <script type=text/javascript>

   2: /*函數是如何被調用的，在其中加入console.trace()方法就可以了*/

   3: 　　function add(a,b){

   4:         console.trace();

   5: 　　　　return a+b;

   6: 　　}

   7: 　　var x = add3(1,1);

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

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

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

  11: </script>

控制台輸出資訊：

 

八、計時功能

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

   1: <script type=text/javascript>

   2: 　　console.time(控制台計時器一);

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

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

   5: 　　}

   6: 　　console.timeEnd(控制台計時器一);

   7: </script>

已耗用時間是38.84ms

 

九、console.profile()的效能分析

效能分析（Profiler）就是剖析器各個部分的已耗用時間，找出瓶頸所在，使用的方法是console.profile()。

   1: <script type=text/javascript>

   2:     　　function All(){

   3:             alert(11);

   4: 　　　　     for(var i=0;i<10;i++){

   5:                 funcA(1000);

   6:              }

   7: 　　　　    funcB(10000);

   8: 　　    }

   9:

  10:     　　function funcA(count){

  11:     　　　　for(var i=0;i
  12:     　　}
  13:
  14:     　　function funcB(count){
  15:     　　　　for(var i=0;i
  16:     　　}
  17:
  18:     　　console.profile('效能分析器');
  19:     　　All();
  20:     　　console.profileEnd();
  21:     </script>
說明一下，LZ測試時，在All()中未加alert,控制條沒有輸出，加上了之後，就有了一張效能分析表，暫時不清楚原因，若你知道，可以評論。