谷歌控制台console输出带样式的日志
版权声明:
本文为博主原创文章,转载请声明原文链接...谢谢。o_0。
更新时间:
2017-10-06 13:34:06
温馨提示:
学无止境,技术类文章有它的时效性,请留意文章更新时间,如发现内容有误请留言指出,防止别人"踩坑",我会及时更新文章
谷歌的控制台常用的就是输邮一些日志信息查看下,但有时候输出的太多啦想区分下,其实在Chrome的开发者工具里,console 可以加样式,可以显示缤纷的颜色,甚至图片。你想到的差不多都可以实现!
警告和错误提示
console.warn();
console.erro();
给输出的文本加样式
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")