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

 

 


CSS实现的控制台效果

摘要 我们在写blog或写文档说明的时候,有时候说明在控制台中怎样使用,在windows xp/2000中就是cmd命令。 为了表达这种在控制台中的操作,我写了个 CSS来呈现效果。 需求和设计要求...
  • four_lee
  • four_lee
  • 2008年02月04日 15:40
  • 674

console.log改变样式

前言: 大家有没有注意到在有些网站中,当我们打开F12的时候,里边会有console内容,这些内容还是有样式的,如果之前没有见到过,你可以打开百度首页,按下F12,里边会有 百度的招聘信息,我们自己写...
  • jvid_sky
  • jvid_sky
  • 2016年12月06日 16:58
  • 1002

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

最近我在研究Google+,因为发现它里面实现以一些非常奇特的效果。我打开谷歌浏览器的控制台,看到了下面的信息: 警告! 使用此控制台可能会让攻击者利用Self-XSS(自跨站脚本)攻...
  • u011982967
  • u011982967
  • 2016年07月19日 23:48
  • 1722

在console面板打印有颜色的字体

前端的同学一定都很熟悉console命令。我们经常会用到console.log()来打印一些调试信息,当然console还有其他很多妙用,如 console.log() 这个应该是最常用的 ...
  • tietth
  • tietth
  • 2017年04月01日 13:30
  • 1111

chrome浏览器下字体颜色太浅或者模糊的情况下处理方法

*{font-weight:100!important;} *{text-shadow:0 0 1.5px #ccc !important;}     *:n...
  • y75475
  • y75475
  • 2017年05月05日 16:22
  • 1052

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

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

Google Chrome代码调试(一)——Console的使用

Google Chrome控制台为开发者提供了网页和应用程序调试的几种方法,本文通过基本操作、控制台API、命令行API来介绍控制台的使用。 基本操作 1、开启控制台     可以通过下列三种方...
  • mole
  • mole
  • 2015年01月04日 21:55
  • 2130

Log4j 2配置与IntelliJ IDEA控制台颜色

原文地址:http://www.hankcs.com/program/java/log4j-2-console-color-configuration-with-intellij-idea.html ...
  • liyongke89
  • liyongke89
  • 2016年05月26日 07:17
  • 6693

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

在正常模式下,一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读,除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息,在控制台...
  • haoxinnihao
  • haoxinnihao
  • 2014年09月29日 11:46
  • 395

关于Console控制台输出的玩法

你在浏览网页的时候,是否注意过这些网页的控制台输出了什么? Console这种东西,其实一般只有前端工作者才会注意到。console在我们实际开发中可是个宝贝,他是各种error和warning...
  • a502526469
  • a502526469
  • 2017年02月22日 13:07
  • 132
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Chrome 控制台新玩法-console显示图片以及为文字加样式
举报原因:
原因补充:

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