【原创】你见过这样的console么?

console是前端开发中常用的调试方法,但是你见过这种样式的console么?

比如这样的:


或者这样的:


又或者这样的:


这种带着css样式的console是不是看起来更好一点。
其实实现方法很简单:格式如下:

console.log("%c需要输出的信息 ", "css 代码");

可以复制以下代码到控制台自己试一下:

console.log("%cHello World", "font-size:30px;padding:10px;color: #fff;text-transform: uppercase;text-shadow:0 0 5px #fff,0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de; ");

当然,如果有足够的时间,可以加上上面这些效果,给console添一点乐趣,毕竟,有时候开发也是很无聊的。但是大部分时候,没有时间去搞这些花里胡哨的东西,在日常开发中,用的最多的就是console.log(),输出的信息多了,很容易看晕,毕竟,我就是经常干这种事情的人,emmm。。
所以说如果能让自己输出的信息变得可读性高一点,岂不是很好。
比如:可以用console.warn()输出警告信息:



可以用console.error()输出错误信息:



可以用console.info()输出多个对象信息:

可以用console.table()将数据输出成表格:

开发的时候加上这些是不是能添点乐趣?
最后再补上MDN文档

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在应用程序中添加日志记录总的来说基于三个目的:监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析...
    时待吾阅读 5,080评论 1 13
  • 在应用程序中添加日志记录总的来说基于三个目的:监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析...
    时待吾阅读 5,023评论 0 6
  • console对象是 JavaScript 的原生对象,它有点像 Unix 系统的标准输出stdout和标准错误s...
    许先生__阅读 491评论 0 2
  • 1.console.log 释义:向控制台输出普通信息如果参数只是字符串: console.log("在控制台会输...
    li4065阅读 3,438评论 0 0
  • 昨天我们出发,准备回老家去和爷爷奶奶一起过年。 上午10点,我们准时出发,预计10:40左右可以出...
    丑丑_乔庄阅读 294评论 0 0