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

Posted 2020-08-19 cy的小天地

一、显示信息

1 <script type="text/javascript">
2         console.log(‘hello‘);
3         console.info(‘信息‘);
4         console.error(‘错误‘);
5         console.warn(‘警告‘);
6 </script>

二、占位符

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

三、信息分组

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

   　　    console.groupEnd();
       </script>

四、查看对象信息

 

1  <script type="text/javascript">
2             var obj = {
3                 name:"张三",
4                 group:001,
5                 course:"计算机"
6             };
7             console.dir(obj);
8     </script>

 

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

1     <div id="obj">
2            <p>www.baidu.com</p>
3       </div>
4     <script type="text/javascript">
5            var info = document.getElementById(‘obj‘);
6            console.dirxml(obj);
7     </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>

 

八、计时功能

 

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

 

九、程序性能分析

 

 1  <script type="text/javascript">
 2         　　function getAll(){
 3                 alert("hello");
 4     　　　　     for(var i=0;i<10;i++){
 5                     funcA(1000);
 6                  }
 7     　　　　    funcB(10000);
 8     　　    }
 9    
10        　　function funcA(count){
11        　　　　for(var i=0;i<count;i++){}
12        　　}
13   
14        　　function funcB(count){
15        　　　　for(var i=0;i<count;i++){}
16        　　}
17   
18        　　console.profile(‘性能分析‘);
19        　　getAll();
20        　　console.profileEnd();
21        </script>

 

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