前端实用的调试命令console使用

前端

一、显示信息的命令

1
2
3
4
console.log('hello'); 
console.info('信息');
console.error('错误');
console.warn('警告');

最常用的就是console.log了。

二：占位符

console支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o），

1
console.log("%d年%d月%d日",2018,04,08);

#三：颜色

console支持打印是显示不同文字，甚至图片，%c:css样式(部分浏览器不支持)

%c：Formats the output string according to CSS styles you provide.

1
2
3
console.log("%c3D Text"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em")
console.log("%cColorful CSS","background: rgba(252,234,187,1);background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%,rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(12%, rgba(175,250,77,1)), color-stop(28%, rgba(0,247,49,1)), color-stop(39%, rgba(0,210,247,1)), color-stop(51%, rgba(0,189,247,1)), color-stop(64%, rgba(133,108,217,1)), color-stop(78%, rgba(177,0,247,1)), color-stop(87%, rgba(247,0,189,1)), color-stop(100%, rgba(245,22,52,1)));background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(175,250,77,1) 12%, rgba(0,247,49,1) 28%, rgba(0,210,247,1) 39%, rgba(0,189,247,1) 51%, rgba(133,108,217,1) 64%, rgba(177,0,247,1) 78%, rgba(247,0,189,1) 87%, rgba(245,22,52,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1 );font-size:5em")
console.log("%c", "padding:50px 300px;line-height:120px;background:url('https://cdn2.jianshu.io/assets/web/nav-logo-4c7bbafe27adc892f3046e6978459bac.png') no-repeat;");

四：信息分组

1
2
3
4
5
6
7
8
9
console.group("第一组信息");
	console.log("group1：test1");
	console.log("group1：test2");
console.groupEnd();

console.group("第二组信息");
	console.log("group2：test1");
	console.log("group2：test2");
console.groupEnd();

五：查看对象的信息

console.dir()可以显示一个对象所有的属性和方法。

1
2
3
4
5
6
7
8
9
var test ={
  name:'test',
  age:18,
  des:'I am Test',
  fn:function(){
    
  }
}
console.dir(test);

六：显示Html页面节点内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <!DOCTYPE html>
  <html>
  <head>
      <title>console.dirxml()</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>
      <div id="TZA4S">
          <div class="" id="lga">
                <img style="padding-top:112px" height="92" src="/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width="272" alt="Google" id="hplogo" title="Google" onload="typeof google==='object'&amp;&amp;google.aft&amp;&amp;google.aft(this)">
          </div>      
      </div>
    <script>
       var info = decument.getElementById('TZA4S');
       console.dirxml(info);
    </script>
</body>
 </html>

七：断言判断数据或结果

console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

1
2
3
4
var result = 1; 
console.assert( result );
var age = 18; 
console.assert(age === '18' );

八：打印函数调用的栈信息

调试JavaScript程序时，有时需要打印函数调用的栈信息，这可以通过使用console.trace()来实现

1
2
3
4
5
6
7
8
9
10
11
function doTask(){
    doSubTask(1000,10000);
}
 
function doSubTask(countX,countY){
    for(var i=0;i<countX;i++){
        for(var j=0;j<countY;j++){} 
    }
    console.trace();
}
doTask();

九：测量程序消耗的时间

console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。

console.time方法是开始计算时间，console.timeEnd是停止计时，输出脚本执行的时间。

1
2
3
4
5
console.time('计时统计：begin')
for(var i=0;i<1000;i++){
  for(var j=0;j<1000;j++){} 
}
console.timeEnd('计时统计：begin')

注意:开始和结束的描述会一直，不然会无法统计，并报警：Timer ‘begin’ does not exist
本地测试结果如下，但是多尝试几次之后，发现其实每次执行的结果略微会有点误差，而且总体次数越多时间越快。
原因：很多程序、进程、线程都由操作系统控制，会影响执行时间。

还有计时工具performance.now()，node测试代码执行时间process.hrtime();

十：性能分析

性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。
console.profile()的使用非常简单：在需要开始profile的地方插入console.profile()，在结束profile的地方插入console.profileEnd()即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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();

涅槃快乐热爱生活，追求技术

个人简介。