Warning: Error while sending QUERY packet. PID=4753 in /home/wwwroot/coco/domain/cnlamp/web/wp-includes/wp-db.php on line 1877 Console Api 让 JS 调试更简单、高效 | LAMP新闻|技巧|经验|资讯站
现在的位置: 首页JAVASCRIPT>正文
Console Api 让 JS 调试更简单、高效
发表于1年前 JAVASCRIPT 暂无评论

除了console.log 你还知道其他调试方法吗?

所有Console Api

1
 
  1. <script type=“text/javascript”>
  2.     console.dir(console);
  3. </script>
复制代码
1
 

显示简单信息

1
 
  1. <script type=“text/javascript”>
  2.     console.log(‘hello world’);
  3.     console.info(‘信息’);
  4.     console.error(‘错误’);
  5.     console.warn(‘警告’);
  6. </script>   
复制代码
1
 

占位符

1
 
  1. <script type=“text/javascript”>
  2.     console.log(‘%d-%d-%d,%s’,2016,08,21,‘中国女排夺的冠军!’);
  3. </script>   
复制代码
1
 

统计代码执行次数

1
 
  1. <script type=“text/javascript”>
  2.     function getInfo()
  3.     {
  4.         console.count(‘执行次数:’);
  5.     }
  6.     getInfo();
  7.     getInfo();
  8.     getInfo();
  9.     getInfo();
  10. </script>  
复制代码
1
 

显示分组信息

1
 
  1. <script type=“text/javascript”>
  2.     console.group(“第一组信息”);
  3.         console.log(‘第一组:自定义消息1’);
  4.         console.log(‘第一组:自定义消息2’);
  5.         console.log(‘第一组:自定义消息3’);
  6.     console.groupEnd();
  7.     console.group(“第二组信息”);
  8.         console.log(‘第二组:自定义消息1’);
  9.         console.log(‘第二组:自定义消息2’);
  10.         console.log(‘第二组:自定义消息3’);
  11.     console.groupEnd();
  12. </script>  
复制代码
1
 

显示对象信息

1
 
  1. <script type=“text/javascript”>
  2.     var TomObj = {
  3.         name  : “Tom”,
  4.         sex   : “男”,
  5.         age   : ’31’,
  6.         hobby : “coding…”
  7.     };
  8.     console.dir(TomObj);
  9. </script>  
复制代码
1
 

显示页面信息

1
 
  1. <div id=“console”>
  2.     <h1>console api</h1>
  3. </div>
  4. <script type=“text/javascript”>
  5.     var info = document.getElementById(‘console’);
  6.     console.dirxml(info);
  7. </script> 
复制代码
1
 

判断表达式或变量是否为真

1
 
  1. <script type=“text/javascript”>
  2.     var code = 200;
  3.     console.assert(code);
  4.     console.assert(code == 200);
  5.     console.assert(code == 500);
  6. </script>
复制代码
1
 

追踪函数的调用轨迹

1
 
  1. <script type=“text/javascript”>
  2.     function add(a,b) {
  3.         console.trace();
  4.         return a + b;
  5.     }
  6.     add(1,2);
  7.     add(2,3);
  8.     add(3,4);
  9. </script>
复制代码
1
 

计时功能

1
 
  1. <script type=“text/javascript”>
  2.     console.time(“控制台计时器”) ;
  3.     console.log(‘Start’);
  4.     for(var i=0;i<1000;i++) {
  5.         for(var j=0;j<1000;j++){
  6.         }
  7.     }
  8.     console.log(‘End’);
  9.     console.timeEnd(“控制台计时器”);
  10. </script>    
复制代码
1
 

分析性能

1
 
  1. <script type=“text/javascript”>
  2.     function getNews() {
  3.         _getAjax_1();
  4.         _getAjax_3();
  5.     }
  6.     function _getAjax_1 () {
  7.         for(var i=0;i<10;i++){
  8.             _getAjax_2();
  9.         }
  10.     }
  11.     function _getAjax_2 () {
  12.         for(var i=0;i<100;i++){
  13.             _getAjax_3()
  14.         }
  15.     }
  16.     function _getAjax_3 () {
  17.         for(var i=0;i<1000;i++){
  18.         }
  19.     }
  20.     console.profile(‘性能分析器’);
  21.     getNews();
  22.     console.profileEnd();
  23. </script>  
复制代码

 

给我留言

留言无头像?


×
腾讯微博