前段时间看到@堂主在微博上赞天猫的控制台信息
使用非常简单有意思:
console.log("%c css88.com", "font-size:20pt")
以%c
开头,后面的文字就打印的信息,后面一个参数就是样式属性;
可以尝试多个样式,每碰到一个%c
开头就会应用对应的样式:
console.log("%c 前端开发 %c css88.com %c ", "color:red","","color:orange;font-weight:bold")
在样式中你可以通过css3属性写彩色字,文字描边等等:
console.log("%c有阴影的log", "text-shadow: 3px 1px 1px grey") console.log('%c彩色文字啊 ', '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;');
甚至加背景图片:
console.log("%c ", "background: url(/newimg88/2014/03/jquery.png) no-repeat center;padding-left:120px;padding-bottom: 200px;")
抽空可以看一下 api:http://getfirebug.com/wiki/index.php/Console.log
更多console的api:https://www.html.cn/archives/3678
最新评论
写的挺好的
有没有兴趣翻译 impatient js? https://exploringjs.com/impatient-js/index.html
Flexbox playground is so great!
感谢总结。
awesome!
这个好像很早就看到类似的文章了
比其他的教程好太多了
柯理化讲的好模糊…没懂