JS调试：console命令汇总

来源：互联网发布：淘宝开店如何找货源编辑：程序博客网时间：2024/06/07 23:31

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

阅读全文

0 0