9 個讓 JavaScript 調試更簡單的 Console 命令

一、顯示信息的命令

 <!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.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>

輸出如圖:
圖片描述

學習前端的同學注意了!!!
學習過程中遇到什麼問題或者想獲取學習資源的話,歡迎加入前端學習交流羣,羣號碼:328058344

發佈了39 篇原創文章 · 獲贊 4 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章