常用Console命令，让js调试更简单

最新推荐文章于 2024-06-11 14:51:18 发布

时光默

最新推荐文章于 2024-06-11 14:51:18 发布

阅读量870

点赞数

文章标签：调试

本文链接：https://blog.csdn.net/zengyonglan/article/details/54863102

版权

总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用Console命令，让js调试更简单</title>
    <style>
        .center {
            height: 500px;
            background:#888;
        }
        .center p{
            background: #fafafa;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
    <script type="text/javascript" src="./jquery-1.8.2.min.js"></script>

</head>
<body>
    <div class="center">
        <p>
            1、委托代理业务通过客户端发单律师在线报价机制，律师将获得更多案源机会；
            2、客户在线向平台支付律师服务费，并由平台对律师费进行托管；
            3、服务完成或确认线下达成交易后，平台向律师所在律师事务所支付律师费；
            4、律师事务所与律师自行结算律师费。
        </p>
    </div>

    <div id="info">
        <h3>我的博客：www.ido321.com</h3>
        <p>程序爱好者：259280570，欢迎你的加入</p>
    </div>
    <script type="text/javascript">
        //一、显示信息的命令
         console.log('hello'); //普通信息
         console.info('信息');//提示信息
         console.error('错误');//错误信息
         console.warn('警告');//警示信息

        //二：占位符
         console.log("%d年%d月%d日",2011,3,26);
         //格式成可展开的的DOM，像在开发者工具Element面板那样可展开 
        console.log('%o',document.body.firstElementChild); 
        // 像JS对象那样访问DOM元素，可查看DOM元素的属性 
        // 等同于console.dir(document.body.firstElementChild) 
        console.log('%O',document.body.firstElementChild);

        //输出红色的、20px大小的字符串：Hello world,欢迎您！
        console.log("%cHello world,欢迎您！","color: red; font-size: 20px"); 

        //三、信息分组
         console.group("第一组信息");

      　　　　console.log("第一组第一条:我的博客(http://www.ido321.com)");

      　　　　console.log("第一组第二条:CSDN(http://blog.csdn.net/u011043843)");

       　　console.groupEnd();

   　　    console.group("第二组信息");

       　　　　console.log("第二组第一条:程序爱好者QQ群： 259280570");

       　　　　console.log("第二组第二条:欢迎你加入");

   　　    console.groupEnd();

        //四、查看对象的信息
        //console.dir()可以显示一个对象所有的属性和方法。
        var info1 = {
            blog:"http://www.ido321.com",
            QQGroup:259280570,
            message:"程序爱好者欢迎你的加入"
        };
        console.dir(info1);

        //五、显示某个节点的内容
        //console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。
        var info = document.getElementById('info');
        console.dirxml(info);

        //六、判断变量是否是真
        //console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。
        //1是非0值，是真；而第二个判断是假，在控制台显示错误信息
        var result = 1;
        console.assert(result);
        var year = 2014;
        console.assert(year == 2018);

        //七、追踪函数的调用轨迹。
        //console.trace()用来追踪函数的调用轨迹。
        //函数是如何被调用的，在其中加入console.trace()方法就可以了。
        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()和console.timeEnd()，用来显示代码的运行时间。

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

        //九、console.profile()的性能分析
        //性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。
    function Foo(){
　　　　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('性能分析器一');
　　Foo();
　　console.profileEnd();

    //十、统计代码被执行的次数
    function myFun(){
        console.count('myFun被执行的次数：');
    }
    myFun();
    myFun();

    //keys和values前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。
    var myObj = {name:'angela',sex:'female',hobby:'programs'};
    keys(myObj);

    </script>
</body>
</html>