console和chrom-tool

资料整理自网络

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常用console命令</title>
    </head>
    <body>
        <div id="box">
            <ul>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script>
            /*
             * 基本的格式:
             */
            console.log("hello");
            console.info("信息");
            console.error("错误");
            console.warn("警告");
            /*
             * console支持printf的占位符格式:
             * 字符(%s) 整数(%d或%i)
             * 浮点数(%f)和对象  (%o)
             */
            console.log("%d年%d月%d日",2011,3,25)
            
            /*
             * 信息分组
             * console.groupCollapsed()
                     同 console.group(); 区别在于嵌套块默认是收起的。
             */
            console.group("第一组信息");
            console.log("第一组第一条信息")
            console.log("第一组第一二条信息")
            console.groupEnd();
            console.group("第二组信息");
               console.log("第二组第一条信息")
               console.log("第二组第一二条信息")
            console.groupEnd();
            
            //还可以嵌套分组
            console.group("第一组信息");
            console.log("第一组第一条信息")
            console.log("第一组第一二条信息")
            
            console.group("第二组信息");
               console.log("第二组第一条信息")
               console.log("第二组第一二条信息")
            console.groupEnd(); 
            console.groupEnd(); 
            //闭合表示这个组结束了,否则下面的代码全在这个小组中
            
            /*
             * 显示一个对象的所有属性和方法
             * console.dir()
             */
            var info = {
                name:"张丹",
                age:20,
                run:function(){
                    alert("running");
                }
            }
            
            console.dir(info);
            
            /*
             * 显示页面节点的html代码 
             */
            var box = document.getElementById("box")
            console.dirxml(box)
            
            /*
             * 判断变量是否为真
             * 为真没有任何输出
             * 如果结果为否,则在控制台输出一条相应信息,并且抛出一个异常。
             */
            var res = 1;
            console.assert(res);
            
            /*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()
             * 分析程序各个部分的运行时间,找出瓶颈所在,
             * 使用的方法是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();
          //这个好像没什么用,因为谷歌的profile中已经有了。
          //除非测某段代码。   参数是表名。
          
          /*输出该行代码被执行的次数
           * console.count("次数")
           */
          for(var i=0;i<20;i++){
              console.count("循环执行的次数")
          }    
          
          /*
           * console.clear()清空控制台
           */
//          console.clear();

        /*
         * keys和values 前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。
         * 只在控制台有效,代码里无效。
         */
        /*
         * 用表格的形式显示json数据。
         */
        var arr = [{name:"张丹",age:20},{name:"王大锤",sex:"male"}];    
        console.table(arr);
        
        /*
         * chrome控制台支持jquery选择器。
         * $0    在 HTML 面板中选中的元素。
           $1    上一次在 HTML 面板中选中的元素。
         */
        //暂时先这些。
        </script>
    </body>
</html>
原文地址:https://www.cnblogs.com/chengyunshen/p/7195638.html