亲们支持我的新博客哦==》原文地址

(欢迎加群一起玩耍:)

逛网站的时候经常发现很多网站控制台打印了很好玩的内容

比如我的网站 →calamus

或者知乎

平时是不是只用console调试或者打印别的信息了,没有试过上面这种呢?感觉很有趣有没有

下面的代码可以复制到控制台自己尝试下效果:

改变文字样式等


console.log("%c 前端开发 %c calamus.xyz %c 蒲", "color:red","","color:orange;font-weight:bold")

添加图片

  console.log("%c ", "background: url(http://p79mwfmry.bkt.clouddn.com/logo50.jpg) no-repeat center;padding-left:80px;padding-bottom: 80px;border-radius:50%;")
  console.log("%c ", "background: url(http://p3i10hjs7.bkt.clouddn.com/console.jpeg) no-repeat center;padding-left:640px;padding-bottom: 242px;")

打印字符画

就是知乎那样的字符画

推荐2款在线的生成工具:

在线工具:picascii

在线工具:mg2txt

在线将文字表情或者图片生成为字符的形式,利用sublime等idea工具在每行最后加换行符号"\n",再去掉换行,粘贴到console.log里面就可以了

附:sublime换行的修改方法:

鼠标滚轮选中所有行的末尾添加"\n",再一起home键回到行首,统一删除换行即可

占位符

其中%c 是占位符,console.log支持的占位符有→

%o、%O都是用来输出Object对象的,对普通的Object对象,两者没区别,但是打印dom节点时不一样

%o输出和不使用格式化输出打印出来的结果一样,可以查看这个dom节点的内容、子节点等;

而%O,你看到的则是该dom节点各个对象属性。

最新文章

  1. 【转】JS编码解码、C#编码解码
  2. MySQL 在 LIMIT 条件后注入
  3. MR跑百分27不动引发的问题
  4. spark学习笔记总结-spark入门资料精化
  5. 重建中国.NET生态系统
  6. APP API如何维护多个版本的一些想法?
  7. myeclipse 2013 SR2 for(MAC/WINDOWS)破解 注册过程
  8. 工作中遇到的问题--JPA 一对多查询
  9. LaTeX中参考文献管理以及注意事项
  10. fuel一键部署openstack
  11. 从 TFS 迁移源代码到 git
  12. java基础知识点学习
  13. [转帖]关于网络编程中MTU、TCP、UDP优化配置的一些总结
  14. idea的svn安装
  15. AttributeError: 'WebDriver' object has no attribute 'switchTo'
  16. PHP学习 类型 变量 常数 运算符
  17. Java中的Random()函数 【转载】
  18. Illegal mix of collations for operation 'concat'
  19. 通过canal实现把MySQL数据实时增量到kafka
  20. linux安装应用程序

热门文章

  1. vs2013 使用vs2017的localdb
  2. py-day2-1 python 列表类 list的调用反法
  3. locate命令详解
  4. 【转】python:让源码更安全之将py编译成so
  5. C#实现Google S2算法
  6. 超级账本Hyperledge的kafka共识算法里的Topic 与 Partition
  7. 测试教程网.unittest教程.8. 断言异常
  8. ALGO-22_蓝桥杯_算法训练_数的划分(DP)
  9. 64位系统VBS调用32位COM组件
  10. Java HashMap的死循环 以及 LRUCache的正确实现