js中console使用1

時間 2019-11-13
原文原文鏈接
js中console主要用於debug時使用javascript
測試代碼以下：html
  1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2         "http://www.w3.org/TR/html4/loose.dtd">
  3 <html>
  4 <head>
  5     <meta charset="UTF-8">
  6     <title>Console</title>
  7     <script type="text/javascript">
  8      window.onload=_pageLoaded;
  9 
 10      /**
 11       * 頁面加載完畢後執行的函數
 12       * @private
 13       */
 14      function _pageLoaded() {
 15          //1.消息級別
 16          console.log('日誌');
 17          console.debug('調試');
 18          console.info('消息');
 19          console.warn('警告');
 20          console.error('錯誤');
 21          console.info('~~~');
 22          //2.佔位符
 23          console.info('我叫%s','張泰鬆');//%s：字符串
 24          console.info('今天是%d年%i月%d日',2019,4,15);//%d、%i：整數
 25          console.info('豬肉價格是%f元/金',9.98);//%f：浮點數
 26          var person = {name:'pine',age:28};
 27          console.info('個人具體信息是:%o',person);//%o：對象
 28          console.info('~~~');
 29          //3.分組顯示信息
 30          console.group('第一組');
 31          console.info('第一組-第一條');
 32          console.info('第一組-第二條');
 33          console.groupEnd();
 34          console.group('第二組');
 35          console.info('第二組-第一條');
 36          console.info('第二組-第二條');
 37          console.groupEnd();
 38          console.info('~~~');
 39          //4.顯示一個對象
 40          person['showName']=function(){
 41              var self = this;
 42              console.info(self.name);
 43          };
 44          console.dir(person);
 45          console.info('~~~');
 46          //5.顯示節點所包含的html代碼
 47          var body1 = document.getElementById("body1");
 48          console.dirxml(body1);
 49          var table1 = document.getElementById("table1")
 50          console.dirxml(table1);
 51          console.info('~~~');
 52          //6.斷言(判斷表達式或變量是否爲真，若是爲真，則不作處理；若是爲假，則打印出錯誤信息)
 53          var a=null;
 54          console.assert(a==null);
 55          var b=2;
 56          console.assert(b>3);
 57          console.info('~~~');
 58          //7.顯示函數的調用蹤影
 59          var result = add3(1,2);
 60          function add3(x,y){return add2(x,y);}
 61          function add2(x,y){return add1(x,y);}
 62          function add1(x,y){return add (x,y);}
 63          function add (x,y){
 64              console.trace('函數調用蹤影~~~');
 65              return x+y;
 66          }
 67          console.info(result);
 68          console.info('~~~');
 69          //8.顯示代碼的運行時間
 70          console.time('time1');
 71          for(var i=0;i<10000;i++){
 72              for(var j=0;j<10000;j++){
 73 
 74              }
 75          }
 76          console.timeEnd('time1');
 77          console.info('~~~');
 78          //9.對代碼進行性能分析
 79          function foo(){
 80            for(var i=0;i<10;i++){
 81                bar1(1000);
 82            }
 83            bar2(10000);
 84          }
 85          function bar1(count){
 86            for(var i=0;i<count;i++){
 87 
 88            }
 89          }
 90          function bar2(count){
 91            for(var i=0;i<count;i++){
 92 
 93            }
 94          }
 95          console.profile('性能分析1');
 96          foo();
 97          console.profileEnd('性能分析1');
 98          /**
 99           * 性能分析：
100           * IE沒反應
101           * firefox須要手動調用下profileEnd方法來結束性能分析
102           * chrome打印出來2條消息，在JavaScript Profiler能夠找到profile
103           *
104           * IE、firefox、chrome均可以進行手動性能分析
105           */
106      }
107 
108 
109     </script>
110 </head>
111 <body id="body1">
112   <table id="table1">
113       <tr>
114           <td>1</td><td>2</td>
115       </tr>
116       <tr>
117           <td>3</td><td>4</td>
118       </tr>
119   </table>
120 </body>
121 </html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。