javaScript调试工具console的使用

javaScript调试工具console命令的使用

　　我最先认识到console命令是在javaScript中看到的，当时只是知道它的console.log()命令的使用，并没有深究。后来，特意去查了下，并通过这篇博客记录下来。

一、console是干嘛的？

　　我的理解是：在浏览器控制台中显示信息，常用于程序代码的调试并查找问题。

　　在程序代码中寻找错误叫做代码调试。调试很难，但很幸运的是，很多的浏览器都内置了调试工具，通常代码中，会出现如语法错误，逻辑错误等等问题，如果没有内置调试工具，将很痛苦。

二、如何使用?

　　浏览器的调试工具通过F12快捷键打开，或者是在浏览器窗口（网页文档）右键，菜单中选择“审查元素” 或者是“检查”项，即可打开，打开如图。

三、console的命令分类：

　　　　　　显示信息命令、占位符、信息分组、查看对象信息、查看某个节点内容、判断变量是否为真、追踪函数的调用轨迹、计时功能、性能分析、表格打印

　　1、显示信息的命令

　　（1）console.log() 打印

1 <body>
2      <script>
3          console.log('hello');
4       </script>
5 </body>

　　在浏览器中运行打开

　　（2） console.info() 信息

<body>
    <script>
        console.info('信息');
    </script>
</body>

　　在浏览器中运行打开，直接打印内容

　　（3） console.error() 错误

<body>
    <script>
        console.error('错误');
    </script>
</body>

　　在浏览器中运行打开，显示类似于报错的消息

　　（4） console.warn() 警告

<body>
    <script>
        console.warn("警告");
    </script>
</body>

　　在浏览器中运行打开,显示是黄色的，并有感叹号

　　2、占位符

　　　　 console还只是printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o），下面一一来实验一下。

　　（1）整数（%s）

<body>
    <script>
       console.log("%d年%d月%d日", 2017, 1, 8);
    </script>
</body>

在浏览器中运行打开，会看到第一个 %d 被替换成了2017，第二个%d 被替换成了 1，第三个%d 被替换成了 8，依次代入替换

注意：少了参数会如何？当你是console.log("%d年%d月%d日", 2017, 8); 输入，少了一个参数，那么就不会被替换，而是按原样内容显示：

多了参数会如何？在这儿，我换成了代码如：console.log("%d年%d月%d日", 2017, 8,2,5,9); 结果发现，多余的参数会直接显示出来：

（2）字符（%s）

　　顾名思义，替换内容为字符串

<body>
    <script>
           console.log("%s你好,%s", "kaikai", "hello word");
    </script>
</body>

（3）对象（%o）

<body>
    <script>
            var a = 0;
             console.log("%o这是一个对象", a);
    </script>
</body>

定义了一个变量 a ，把 0 赋值给变量 a

在javascript中，万物皆对象。显示会把变量a的值直接打印出来。

（3）整数（%i）

　　　　不支持小数点和字符串，会默认取整

<body>
    <script>
            console.log("%i是一个数", 5.9);
             console.log("%i是一个数", 5)
             console.log("%i是一个数", "5");
    </script>
</body>

忽略了小数点，并且字符串会显示为NaN ,NaN （not a number）不是一个数字

　　3、信息分组

　　 当你网页中有很多的console.log()时，你可以使用分组的方式，来进行分类。使用方式：以 console.group()开始，以console.groupEnd()结束。

<body>
    <script>
            console.group("第一组信息");
            console.log("第一组第一条：我是张三");
            console.log("第一组第二条:我喜欢打乒乓");
            console.groupEnd();
            console.group("第二组信息");
            console.log("第二组第一条:我是李四");
            console.log("第二组第二条:我喜欢打篮球");
            console.groupEnd();
    </script>
</body>

可以收缩以及展开，想看哪一组的console.log()的打印信息变得非常方便有条理。

　　4、查看对象的信息

　　　　console.dir()可以显示一个对象所有的属性和方法。

<body>
    <script>
                var info={
                    name:"kaikai",
                    age:20,
                    intro:"开朗、活泼"
        };
            console.dir(info);
    </script>
</body>

　　5、显示某个节点的内容

　　　　console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

<body>
        <div id="info">
                <h3>这是h3标题</h3>
                <p>这是一个段落</p>
        </div>
       <script>
             var infoxml = document.getElementById("info");
             console.dirxml(infoxml);
       </script>
</body>

　　6、判断变量是否为真

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

var res = 1;
console.assert(res);//1是非0值，是真；
 var year = 2014;
console.assert(year==2018);//Assertion failed: console.assert

　　7、追踪函数的调用轨迹

console.trace()用来追踪函数的调用轨迹，函数调用栈信息,来查看函数调用过程，一般会选择将这个方法放在最后执行的函数的方法体中。

//         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);        }
//         //解释：为什么打印add,add1,add2,add3?
//         //由于栈是先进后出机制，所以先执行的方法会在后面输出，因此上述代码结果会按照add,add1,add2,add3的顺序输出。

　　8、计时功能

console.time()和console.timeEnd()，用来显示代码的运行时间。

time()和timeEnd()可以接收一个字符串作为标识，而且两个方法接收的字符串必须一样，如果没有传入字符串则默认为‘default'字符串。

     console.time("执行耗时");
    for(var i = 0 ; i< 1000;i++){
          for(var j = 0;j<1000;j++){}
    }
   console.timeEnd("执行耗时");

9、console.profile()的性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间（看出每个方法执行消耗的时间）找出瓶颈所在，使用的方法是console.profile()。

        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("性能分析器");

10、表格打印

可以直接将对象类型的数据以表格展示。

      var data = [
            {'名称':'蛋糕','数量':5,'价格':30},
            {'名称':'啤酒','数量':2,'价格':20},
        ];
        console.table(data);