chrome控制台新玩法 - console显示

给空空的控制台加点颜色吧。



\n是换行符,可以将一个字符串设置成多行
%c标记之后的内容使用对应样式,格式如 console.log('%c第一个样式%c第二个样式','css1','css2');
如此对应

样式和普通的css效果基本一致,可以设置文字颜色,背景颜色,字体大小,间距,边距等等。还支持部分css3高级效果。
本站代码:
console.log("%c%c博客名称%c熊猫汽水博客","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#3fa9f5;line-height:28px;font-size:16px;"); console.log("%c%c网站地址%chttp://www.pandasoda.cn","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#ff9900;line-height:28px;font-size:16px;"); console.log("%c%c企鹅号码%c2239811961","line-height:28px;","line-height:28px;padding:4px;background:#222;color:#fff;font-size:16px;margin-right:15px","color:#008000;line-height:28px;font-size:16px;"); console.log("%c%cPanda Soda)","line-height:28px;","line-height:28px;padding:4px 0px;color:#fff;font-size:16px;background-image:-webkit-gradient(linear,left top,right top,color-stop(0,#ff22ff),color-stop(1,#5500ff));color:transparent;-webkit-background-clip:text;");
#食用方法
和js输出一样,使用js输出即可,浏览器打开控制台就可以看到效果了。


部分内容来自互联网
熊猫博客打赏


*打赏支持:支付宝/微信/QQ,感谢赏口饭吃
转载此文章须经作者同意,并请附上出处及本页链接。
如有侵权,请联系本站删除。
除特殊说明,原创内容采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

标签: 开发者

发表评论:

选择表情