控制台新玩法 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.

--- EOF ---
订阅本站:feed
原创文章,转载请注明来源:大洋鸟 » 《控制台新玩法 console.log》

留下评论

电子邮件地址不会被公开。 必填项已用*标注

冀ICP备17005573号-1