Chrome 控制台新玩法-console显示图片以及为文字加样式

转载 2014年12月29日 22:23:18

 

有兴趣的同学可以文章最后的代码复制贴到控制台玩玩。

Go for Code

 

在正常模式下,一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读,除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息,在控制台中出来的效果如下:

在输出信息前面会有一个带感叹号的黄色三角警告符号。似乎比一般的console信息要友好得多了。虽然图标是黄色的,但输出的文字仍然是黑色。

另外经常用到的是输出错误信息。可以通过调用console.erro() 来实现。

输出的效果如下:

信息前面会出现一个带叉的红色圆形图标。

这个效果要比警告信息更友好了,字体颜色成红色了。

要更牛叉莫过于对文字应用样式。而现在这一特性已经在谷歌浏览器里实现了。

在Chrome的开发者工具里,console 可以加样式,可以显示缤纷的颜色,甚至图片。简直爽翻了。

具体来说,是可以对输出到console控制台的文字进行CSS控制。

格式如下:

console.log("%c需要输出的信息","css 代码");

 

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

谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档

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.

 1.3D Text:

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")

2.Colorful CSS

复制代码
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")
复制代码

3.Rainbow Text

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;');

 

更新:在Chrome控制台输出图片 

除了上面介绍的那些炫目的文字效果外,你还可以在Chrome控制台中显示图片,自然地,显示gif这样的动态图片也是没问题的。

还是应用差不多的代码,只是将内容变成指定背景为图片。

下面是一个例子:

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

 

 


相关文章推荐

如何在浏览器控制台(console)里输出彩色样式调试信息

最近我在研究Google+,因为发现它里面实现以一些非常奇特的效果。我打开谷歌浏览器的控制台,看到了下面的信息:警告!使用此控制台可能会让攻击者利用Self-XSS(自跨站脚本)攻击来冒充你,并窃取你...

chrome控制台中console的强大

在使用谷歌浏览器进行前端开发的时候,console作为控制台的一个主要方法,相信大家都用过,一般都是用console.log()来输出部分内容,但是console还有很多强大之处,下面主要说一下con...

WinForm打造一款类似 Chrome 风格的 TabControl

WinForm打造一款类似 Chrome 风格的 TabControl

console.log格式输出全解及console的其他方法

console.log还支持格式化输出:%s(字符串)%d、%i(整数)%f(浮点数)%c(CSS样式) script> console.log("%c%s","color: red; backgr...

基于sinopia快速搭建npm私服

如果您想在公司中使用npm软件包系统的所有好处,而不将npm包为所有用户可见,并且使用您的私有package与公开package一样简单,此时可以选择使用sinopia进行快速搭建~...

【sass】实现三角函数

首先要说sass和scss的区别。sass之前是缩进的语法,有点像python和jade那样,写起来有点不方便,所以后来兼容了css的写法,就变成了scss。 sass支持函数,循环,each,mi...
  • natsuyu
  • natsuyu
  • 2016年08月12日 15:16
  • 712

关于Console控制台输出的玩法

你在浏览网页的时候,是否注意过这些网页的控制台输出了什么? Console这种东西,其实一般只有前端工作者才会注意到。console在我们实际开发中可是个宝贝,他是各种error和warning...

Chrome 控制台console的用法

转自:http://www.open-open.com/lib/view/open1421131601390.html 原文出处: ctriphire   大家都有用过各种类型的浏览器,每种浏...

Chrome 控制台console的用法

下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用。 目前控制台方法和属性有: ["$$", "$x", "dir", "dirxml", "keys", "v...

Chrome 控制台console的用法

原文:  http://www.cnblogs.com/ctriphire/p/4116207.html 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Chrome 控制台新玩法-console显示图片以及为文字加样式
举报原因:
原因补充:

(最多只允许输入30个字)