控制台新玩法 console.log

不知道从几何时，有一些网站开始往控制台输出招聘、友情提醒、源码下载等信息。
不过这些信息当然只会被开发人员看到，一般人没事谁按 F12 呢，其实也是挺有针对性的。挺有意思的。我顺便找了找相关的说明，留个记录。

也许你调试也用过console.log()，但是默认输出只会是原样输出。是不是无法实现有图有链接有颜色的文字呢？其实默认就支持，原来一直都没有用过，只是简单的输出。

深入看了看，原来除了 console.log()，还有 cosole.warn() 和 console.error()，除了这些还是可以对输出到 console 控制台的文字进行 CSS 控制。
格式如下：

console.log("%c渐变文字", "background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #fac),color-stop(1, #abc) );color:transparent;-webkit-background-clip: text;font-size:6em;");

图片也可以，弄个背景图就行了。

console.log("%c", "padding:50px;line-height:120px;background:url("gif") no-repeat;");

或者链接

console.log("%s", "http://www.dyniao.com");

下面是console.log() API的官方文档摘要。

%s Formats the value as a string.

%d / %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.