JS调试：console命令汇总-优快云博客

1. 显示信息的命令：

<script>
    console.log("Hello");
    console.info("信息");
    console.error("错误");
    console.warn("警告");
</script>

console显示信息命令

2.占位符：

console支持的占位符有：字符（%s）；整数（%d / i%）；浮点数（%f）；对象（%o）;

<script>
    console.log("I am %s","Sam"); //字符串
    console.log("%d年%d月%i日",2017,11,13); //整数
    console.log("The result is %f",123.4567); //浮点数
    console.log("Today is %o",new Date()); //对象
</script>

console占位符

3.信息分组：

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

    console.group("第二组信息"); 
        console.log("第二组第一条");
        console.log("第二组第二条");
        console.log("第二组第三条");
    console.groupEnd();
</script>

console信息分组

4.查看对象的信息：

<script>
    var o = {
    name:"Sam",
    age:34,
    gender:"男"
    }
    console.dir(o);
</script>

console查看页面信息

5.显示某个节点的内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示节点信息</title>
</head>
<body>
    <div id="node">
        <h1>Hello World!</h1>
        <h2>Hello God!</h2>
    </div>
    <script>
        var node = document.getElementById("node");
        console.dirxml(node);
    </script>
</body>
</html>

console显示节点内容

6.判断变量是否为真：

false的时候会报错！

<script>
    var num = 12312;
    console.assert(num);
    console.assert(num == 21);
</script>

console断言

7.追踪函数的调用轨迹：

 <script>
     function add(a,b){
         console.trace();
             return a+b
     }
     var result = 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);}
</script>

console函数调用轨迹

8.计时功能：

    <script>
        console.time();
        var a = 0;
        for(var i=1;i<1000;i++){
            for(var j=1;j<1000;j++){
                a += i*j;
            }
        }
        console.log(a);
        console.timeEnd()
    </script>

console计时

9.console.profile()性能分析：

在Profiles面板里面查看就可以看到cpu相关使用信息

<script>
        function doTask(){
            doSubTaskA(1000);
            doSubTaskA(100000);
            doSubTaskB(10000);
            doSubTaskC(1000,10000);
        }

        function doSubTaskA(count){
            for(var i=0;i<count;i++){}
        }

        function doSubTaskB(count){
            for(var i=0;i<count;i++){}
        }

        function doSubTaskC(countX,countY){
            for(var i=0;i<countX;i++){
                for(var j=0;j<countY;j++){}
            }
        }
        console.profile("性能分析");
        doTask();
        console.profileEnd("性能分析");
</script>

10.代码被执行的次数：

 <script>
        function count(){
            console.count("我被执行的次数：")
        }
        for(var i=0;i<10;i++){
            count();
        }
</script>

console Count