浅谈console的使用

Author : lovecicy

console的简介

作为一名web前端开发,不像后端开发有各种IDE提供调试功能,最开始只能苦哈哈的用alert方法弹出消息进行调试,既麻烦又不方便。后来,Firebug以及Chrome DEVTools的出现给前端开发带来了福音,提供的console对象也极大的方便了前端开发的调试。但是console可不像我们想象中那么简单,这个对象背后的复杂用法,你未必知道。

console的基本用法

先来说说它的简单用法,想必大家每天都在用吧,尤其是console.log:

console.log('this is a log!');
console.warn('this is a warning!');
console.error('something went wrong!');

在平时的调试中,我几乎只用到了console.log,对于另外两个方法,几乎没有使用,因为console.log已经可以满足我的要求了。
同时,在使用console.log()时,我们可以传递多个参数,用逗号分割,它会自动将所有参数一起输出,比如:

console.log('This is ', 'a test. ', 'This year is ', 2010+4);

会输出“This is a test. This year is 2014″。

console的进阶用法

这部分的用法都是Chrome的用法,Firefox的用法请参考MDN的文档。

1. 格式化输出

这里,写过C的同学肯定不陌生了,跟printf一个样啊!

console.log('This year is %d', 2014);

同样输出“This year is 2014”。
格式化的参数可以查看Google Developers上的API:

Format Specifier Description
%s Formats the value as a string.
%d or %i Formats the value as an integer.
%f Formats the value as a floating point value.
%o Formats the value as an expandable DOM element (as in the Elements panel).
%O Formats the value as an expandable JavaScript object.
%c Formats the output string according to CSS styles you provide.

这里先看下%o,它可以输出一个DOM元素,你可以在log里面看到它的层级关系,就想你在DEVTools的HTML面板看到的一样;而%O则可以输出一个JS对象,同样可以看到它的各层属性值,就像在Sources面板中的Watch Expressions部分看到的一样。通过一个简单的例子可以看到%o和%O的区别:

第一个可以看到DOM元素的内容,子节点等,第二个则展示的则是DOM节点对象的各个属性。

当然,最神奇的要数%c啦,他允许你对输出的log添加样式,这就有无数可能啦。先来看个来自API Reference的例子:

console.log("%cUser %s has %d points", "color:orange; background:blue; font-size: 16pt", userName, userPoints);
console style

下面的例子就狂炫酷拽吊炸天啦:
3D文字

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('%cRainbow Text ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

背景图片
除了炫目的字体,背景颜色,你还可以设置背景图片,即使是动态的gif也不在话下。

console.log("%c", "padding:50px 300px;line-height:120px;background:url('http://wayouliu.duapp.com/img/tagsImg/youth.gif') no-repeat;");

consolebackground.
但是这里有些问题就是,你没法直接设置width和height。所以如果要输出图片,你需要做些调整,用padding来把整个区域撑开到需要的大小,然后还要设置line-height才行。腾讯Alloy团队的同学为我们总结了以下几点(鼓掌):
– line-height的值等于图片高度
– background就不需多说,但你会发现no-repeat设置了没生效。。。
– padding左右两边的值显然是图片宽度的一半
– 最头痛的是padding上下的值,试过用高度的一半,结果输出的大小比想象的要高!所以建议:用这种方法输出,padding上下的值你要一点点的调整直到达到你要的高度

2. 计数器(console.count(label))与计时器(console.time(label),console.timeEnd(label))

在调试时我们经常需要用到计数器的功能,通常我们会用一个变量来记录,现在可以使用console.count()方法实现了。此方法接收一个参数label,用来表明当前的计数器名称。

console.count("Hello world");
//Hello world: 1
//Hello world: 2
//Hello world: 3

同样的,偶尔我们也会用到计时器,现在也可以摆脱自己new Date()了。console.time(label)开始计时,console.timeEnd(label)结束计时,并打印出时间,精确到亚毫秒级。

3. 分组打印(console.group(object[, object, …]), console.groupEnd())

你也可以通过console.group()为log分组,接收的参数和console.log()类似:

console.group("Group log for: %s", user);
console.log("User identified");
console.groupEnd();

4. Profile (console.profile([label]), console.profileEnd())

当DevTools打开时,调用console.profile([label])方法可以在profile面板中开始记录JS对CPU的使用率。它接收一个可选的label作为参数,调用console.profileEnd()结束当前的记录。
下面的例子中,在函数的开始处开始记录CPU使用率,在函数执行完毕时结束记录。

function processPixels() {
  console.profile("Processing pixels");
  // later, after processing pixels
  console.profileEnd();
}

5. 打印函数被调用时的堆栈(console.trace())

在调用console.trace()时,会打印出这一瞬间的函数调用栈,包括JS文件指定行的链接。与console.trace()类似,console.error()也可以打印出函数的调用栈。只不过在console面板中用filter过滤时,一个出现在logs中,一个出现在error中。

console里玩花样–招兵买马

如果说console里还能玩出什么花样,你能想到什么?有的公司就用console招兵买马呢。不信?给你举几个栗子吧:
Mozilla, Firefox的缔造者,如果你去他们的开发者网站,按F12你会看到下面的图案,包含了mozilla的logo和他们的招聘启事,shock到了吗?
mozilla
还有Parse.com,这个为移动App提供云服务的网站也在console里面招人呢,就喜欢咱这种有好奇心的孩子。
除了这些国外公司,国内的新锐科技博客爱范儿也在这儿找人呢,当然招的是前端啦,按F12你会看到这样的招聘启事:“^_^ 想加入爱范儿前端团队?请发送邮件到 app@ifanr.com”,这个邮箱在爱范儿的招聘页面可以看不到哦!
有兴趣的同学可以去看看还有哪些网站在用这种方式找人呢。真是一种既经济又实惠的方式呢。

Reference

Google Developers
AlloyTeam
贤心

standard
  1. Cicy - 2014 年 8 月 12 日 11:03 上午

    赞,%o跟%O还大有区别

    回复
  2. tcdona - 2014 年 8 月 21 日 1:12 下午

    学到了不错哦!

    回复
    • lovecicy - 2014 年 8 月 21 日 4:46 下午

      O(∩_∩)O哈!

      回复

Have your say