简单的浏览器调试——console命令

一、显示信息

 <script type="text/javascript">
         console.log('hello');
         console.info('信息');
         console.error('错误');
         console.warn('警告');
 </script>

二、占位符

   <script type="text/javascript">
             console.log("%d年%d月%d日",2016,11,12);
     </script>

三、信息分组

<script type="text/javascript">
            console.group("我是第一组");
 
       　　　　console.log("111");
 
       　　console.groupEnd();
 
   　　    console.group("我是第二组");
 
       　　　　console.log("222");
 
   　　    console.groupEnd();
       </script>

四、查看对象信息

  <script type="text/javascript">
             var obj = {
                 name:"张三",
                 group:001,
                 course:"计算机"
             };
             console.dir(obj);
     </script>

五、显示节点内容(包括html/xml)

     <div id="obj">
            <p>www.baidu.com</p>
       </div>
     <script type="text/javascript">
            var info = document.getElementById('obj');
            console.dirxml(obj);
     </script>

六、判断变量是否为真

  <script type="text/javascript">
        　　var result = 0;
        　　console.assert( result );
        　　var year = 2016;
        　　console.assert(year == 2018 );
    </script>

七、追踪函数的调用轨迹

<script type="text/javascript">
    　　function foo(a,b){
            console.trace();
    　　　　return a+b;
    　　}
    　　var x = foo3(1,1);
    　　function foo3(a,b){return foo2(a,b);}
    　　function foo2(a,b){return foo1(a,b);}
   　　function foo1(a,b){return foo(a,b);}
   </script>

八、计时功能

 <script type="text/javascript">
     　　console.time("计时器01");
     　　for(var i=0;i<999;i++){
     　　　　for(var j=0;j<999;j++){}
     　　}
     　　console.timeEnd("计时器01");
   </script>

九、程序性能分析

  <script type="text/javascript">
         　　function getAll(){
                 alert("hello");
     　　　　     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('性能分析');
        　　getAll();
        　　console.profileEnd();
        </script>

浏览器调试新技能，学习之余写到这里备忘~