谷歌控制台console输出带样式的日志

来源:赵克立 分类: 其它 标签:无发布时间:2017-10-06 12:07:18浏览:826
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
温馨提示:
技术类文章有它的时效性,请留意文章更新时间以及软件的版本
更新时间:
2017-10-06 13:34:06

谷歌的控制台常用的就是输邮一些日志信息查看下,但有时候输出的太多啦想区分下,其实在Chrome的开发者工具里,console 可以加样式,可以显示缤纷的颜色,甚至图片。你想到的差不多都可以实现!

警告和错误提示

console.warn();

console.erro();

image.png

给输出的文本加样式

console.log("%c一些文本 ", "css 代码");


%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  使用第二个参数给定的css样式来格式化文本


下面是一个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")

image.png


微信号:kelicom QQ群:215861553 紧急求助须知
留下一点心意, :)
点击更换验证码
留言