js中console使用1

js中console主要用于debug时使用
测试代码如下：
  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>
猜你喜欢
