有趣的console.log(console.log输出彩色字,图片等)
亲们支持我的新博客哦==》原文地址
(欢迎加群一起玩耍:)
逛网站的时候经常发现很多网站控制台打印了很好玩的内容
比如我的网站 →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节点各个对象属性。
有趣的console.log(console.log输出彩色字,图片等)的更多相关文章
- Node: 通过Console打印日志 (Log Message via Console)
In normal development, we are likely to use 'console.log' for message logging, yet it's simple, we a ...
- 【Android自动化】编写一个log模块,输出至控制台,供程序运行查看
# -*- coding:utf-8 -*- import logging def get_log(name): log = logging.getLogger(name) log.setLevel( ...
- Android关于log日志,华为不输出log.v,log.d(zz)
[java] view plain copy 我用的是mate8,本来虚拟机测试一点日志一点问题没有 [java] view plain copy 但是真机测试发现log.d一直不输出,正好又试了lo ...
- Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)的用法
Android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, ...
- -Xloggc:log/gc.log 指定GC log的位置
-Xloggc:log/gc.log指定GC log的位置,以文件输出帮助开发人员分析问题
- android Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)
在Android群里,经常会有人问我,Android Log是怎么用的,今天我就把从网上以及SDK里东拼西凑过来,让大家先一睹为快,希望对大家入门Android Log有一定的帮助. android. ...
- android:分享 一个很强大的LOG开关---Log.isLoggable
标签:android分享 一个很强大的log开 1.API亮点: 此API可以实现不更换APK,在出问题的手机上就直接能抓到有效log,能提升不少工作效率. 2.API介绍 最近在解决短信问题时,看到 ...
- JMeter调试参数是否取值正确,调试正则提取的结果(log.info|log.error|print)
JMeter调试参数是否取值正确,调试正则提取的结果(log.info | log.error | print) Jmeter的log输出控制(jmeter.log) 1 2 log_level.jm ...
- Android中级教程之----Log图文详解(Log.v,Log.d,Log.i,Log.w,Log.e)
在Android群里,经常会有人问我,Android Log是怎么用的,今天我就把从网上以及SDK里东拼西凑过来,让大家先一睹为快,希望对大家入门Android Log有一定的帮助. android. ...
随机推荐
- piwik获取访客头像,自定义显示访问者头像(URL)和描述(标题和替代)
访客头像 自定义显示访问者头像(URL)和描述(标题和替代) 链接地址:https://plugins.matomo.org/VisitorAvatar#description
- Python高效编程技巧
如何在列表,字典,集合中根据条件筛选数据 1.过滤掉列表[-1,-2,-3,4,5,6]中的负数和0 方法1,for循环 data = [-1, -2, -3, 4, 5, 6] res = [] f ...
- PHP操作mongoDB 笔记
转自 http://blog.csdn.net/black_ox/article/details/22678747 命令也可以在参考http://www.jb51.net/article/51601. ...
- linux svn客户端通过 https访问windows VisualSVN Server Manager
1)需求: 已经在阿里云windwos系统 下面安装了VisualSVN Server Manager 做为svn服务器: 现在要在腾讯云源码安装新版本客户端 2)开始源码编译安装TortoiseSV ...
- table 设置每列的颜色
ISBN Title Price 3476896 My first HTML $53 5869207 My first CSS $49 <!DOCTYPE html> <html ...
- js 格式化时间日期函数小结
下面是脚本之家为大家整理的一些格式化时间日期的函数代码,需要的朋友可以参考下. 代码如下: Date.prototype.format = function(format){ var o = { &q ...
- STL进阶--vector vs deque
vector class Dog; // 例 1: vector<Dog> vec(6); // vec.capacity() == 6, vec.size() == 6, // 默认构造 ...
- RecyclerAdapter封装
import java.util.LinkedList; import java.util.List; import android.content.Context; import android.s ...
- [UE4]Set Array Elem
用一个新元素替换数组中已有的元素. “Size to Fit”:true,表示如果index参数大于数组所有,将会自动扩展数组大小.
- [UE4]使用DataTable