9 個讓 JavaScript 除錯更簡單的 Console 命令

dwqs發表於2016-08-11
JavaScript除錯

一、顯示資訊的命令

 <!DOCTYPE html>
 <html>
 <head>
     <title>常用console命令</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
     <script type="text/javascript">
         console.log('hello');
         console.info('資訊');
         console.error('錯誤');
         console.warn('警告');
     </script>
 </body>
 </html>

最常用的就是console.log了。

二：佔位符

console上述的集中度支援printf的佔位符格式，支援的佔位符有：字元（%s）、整數（%d或%i）、浮點數（%f）和物件（%o）

<script type="text/javascript">
         console.log("%d年%d月%d日",2011,3,26);
</script>

效果：

三、資訊分組

<!DOCTYPE html>
 <html>
 <head>
     <title>常用console命令</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
     <script type="text/javascript">
         console.group("第一組資訊");

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

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

     　　console.groupEnd();

 　　    console.group("第二組資訊");

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

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

 　　    console.groupEnd();
      </script>
 </body>
 </html>

效果：

四、檢視物件的資訊

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

<script type="text/javascript">
         var info = {
             blog:"http://www.ido321.com",
             QQGroup:259280570,
             message:"程式愛好者歡迎你的加入"
         };
         console.dir(info);
</script>

效果：

五、顯示某個節點的內容

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

<!DOCTYPE html>
 <html>
 <head>
     <title>常用console命令</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
 <body>
    <div id="info">
         <h3>我的部落格：www.ido321.com</h3>
         <p>程式愛好者:259280570,歡迎你的加入</p>
     </div>
     <script type="text/javascript">
         var info = document.getElementById('info');
         console.dirxml(info);
     </script>
 </body>
 </html>

效果：

六、判斷變數是否是真

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

<script type="text/javascript">
     　var result = 1;
     　console.assert( result );
     　var year = 2014;
     　console.assert(year == 2018 );
</script>

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

七、追蹤函式的呼叫軌跡。

console.trace()用來追蹤函式的呼叫軌跡。

<script type="text/javascript">
 /*函式是如何被呼叫的，在其中加入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);}
</script>

控制檯輸出資訊：

八、計時功能

console.time()和console.timeEnd()，用來顯示程式碼的執行時間。

<script type="text/javascript">
 　　console.time("控制檯計時器一");
 　　for(var i=0;i<1000;i++){
 　　　　for(var j=0;j<1000;j++){}
 　　}
 　　console.timeEnd("控制檯計時器一");
</script>

執行時間是38.84ms

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

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

 <script type="text/javascript">
     　　function All(){
             alert(11);
 　　　　     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++){}
     　　}

     　　console.profile('效能分析器');
     　　All();
     　　console.profileEnd();
     </script>

輸出如圖：

相關文章