有趣的console.log(console.log输出彩色字,图片等)
2024-09-30 06:35:19
亲们支持我的新博客哦==》原文地址
(欢迎加群一起玩耍:)
逛网站的时候经常发现很多网站控制台打印了很好玩的内容
比如我的网站 →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节点各个对象属性。
最新文章
- 【转】JS编码解码、C#编码解码
- MySQL 在 LIMIT 条件后注入
- MR跑百分27不动引发的问题
- spark学习笔记总结-spark入门资料精化
- 重建中国.NET生态系统
- APP API如何维护多个版本的一些想法?
- myeclipse 2013 SR2 for(MAC/WINDOWS)破解 注册过程
- 工作中遇到的问题--JPA 一对多查询
- LaTeX中参考文献管理以及注意事项
- fuel一键部署openstack
- 从 TFS 迁移源代码到 git
- java基础知识点学习
- [转帖]关于网络编程中MTU、TCP、UDP优化配置的一些总结
- idea的svn安装
- AttributeError: 'WebDriver' object has no attribute 'switchTo'
- PHP学习 类型 变量 常数 运算符
- Java中的Random()函数 【转载】
- Illegal mix of collations for operation 'concat'
- 通过canal实现把MySQL数据实时增量到kafka
- linux安装应用程序
热门文章
- vs2013 使用vs2017的localdb
- py-day2-1 python 列表类 list的调用反法
- locate命令详解
- 【转】python:让源码更安全之将py编译成so
- C#实现Google S2算法
- 超级账本Hyperledge的kafka共识算法里的Topic 与 Partition
- 测试教程网.unittest教程.8. 断言异常
- ALGO-22_蓝桥杯_算法训练_数的划分(DP)
- 64位系统VBS调用32位COM组件
- Java HashMap的死循环 以及 LRUCache的正确实现