• js调试工具console方法详解


    一、显示信息的方法

    最常用的console.log(),一般用来调试。

    console.log('hello');
    console.info('信息');
    console.error('错误');
    console.warn('警告');                                                                                                          

    效果:

    二、占位符

    console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o

    console.log("%d年%d月%d日",2011,3,26);
    

    效果:

    三、信息分组

    console.group("第一组信息");
        console.log("第一组第一条");
        console.log("第一组第二条");
    console.groupEnd();
    console.group("第二组信息");
       console.log("第二组第一条");
       console.log("第二组第二条");
    console.groupEnd();
    

    效果:

    四、查看对象的信息

    var obj = {
        name: 'ali',
        age: '20',
        showName: function () {
           alert(this.name);
        }
    }
    console.dir(obj);
    
    

    效果:

    五、显示某个节点的内容

    var info = document.getElementById('info');
    console.dirxml(info);
    

    效果:

    六、判断变量是否是真

    var result = 1;
       console.assert( result );
       var year = 2014;
       console.assert(year == 2018 );
    

    效果:

    七、追踪函数的调用轨迹

    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);}
    

    效果:

    八、计时功能

    console.time("控制台计时器一");
    for(var i=0;i<1000;i++){
      for(var j=0;j<1000;j++){}
    }
    console.timeEnd("控制台计时器一");
    

    效果:

    九、的性能分析

    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();
    

    效果:

    chrome貌似不起作用,盗了一张firebug的图...

  • 相关阅读:
    前端的UI设计与交互之布局篇
    前端的UI设计与交互之文案篇
    前端的UI设计与交互之字体篇
    前端的UI设计与交互之图标篇
    前端的UI设计与交互之色彩篇
    Linux学习(一)
    PHP正则表达式基本语法
    PHP正则表达式函数学习
    PHP发送HTTP请求的几种方式
    PHP实现队列
  • 原文地址:https://www.cnblogs.com/zhubei/p/6699500.html
Copyright © 2020-2023  润新知