console.log添加样式及图片
console.log在控制台打出css样式的文字及图片
谷歌开发者中心上面关于谷歌浏览器控制台console.log()的文档
Format | Specifier |
---|---|
%s | Formats the value as a string. |
%d or %i | Formats the value as an integer. |
%f | Formats the value as a floating point value. |
%o | Formats the value as an expandable DOM element (as in the Elements panel). |
%O | Formats the value as an expandable JavaScript object. |
%c | Formats the output string according to CSS styles you provide. |
可以看到,通过占位符%c
,可以对输出到console控制台的文字进行CSS控制。
格式如下:
console.log("%c需要输出的信息 ", "css 代码");
输出3D TEXT
|
|
彩色背景文字
|
|
文字颜色
|
|
设置不同的css
|
|
在Chrome控制台输出图片
|
|
参考资料
https://www.cnblogs.com/Wayou/p/chrome_dev_tool_style_console.html
console.log添加样式及图片的更多相关文章
- console.log 加样式
console.log("%c%s", "color: black; font-size: 18px;", "test")
- JS之console.log详解以及兄弟姐们邻居方法扩展
console.log() 基本用法 console.log,前端常用它来调试分析代码,你可以在任何的js代码中调用console.log(),然后你就可以在浏览器控制台看到你刚才打印的常量,变量,数 ...
- console.log()显示图片以及为文字加样式
有兴趣的同学可以文章最后的代码复制贴到控制台玩玩. Go for Code 在正常模式下,一般只能向console 控制台输出简单的文字信息.但为了把信息输出得更优雅更便于阅读,除了cosole.lo ...
- 前端不为人知的一面--前端冷知识集锦 前端已经被玩儿坏了!像console.log()可以向控制台输出图片
前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...
- 有趣的console.log(console.log输出彩色字,图片等)
亲们支持我的新博客哦==>原文地址 ) 逛网站的时候经常发现很多网站控制台打印了很好玩的内容 比如我的网站 →calamus 或者知乎→ 平时是不是只用console调试或者打印别的信息了,没有 ...
- 等不及要告诉你的一件事-console.log可以指定样式
今天看`简书`文章,习惯性的打开了开发者工具,于是发现了意见有意思的事,在console面板,发现了如下的日志: ??? 这 ... 有点意思. 如果上面的图片,不能引起你的兴趣,那么你可以再看看这个 ...
- 用css改变console.log的输出样式
console.log允许你通过css来格式化输出,格式如下: console.log('%c字符串[%c字符串]', 样式1, [样式2]) 其中"%c"为模板字符串 例子: 1 ...
- 改变console.log的输出样式
console.log允许你通过css来格式化输出,格式如下: console.log(‘%c字符串%c字符串’, 样式1, [样式2]) 其中”%c”为模板字符串 例子: 1 console.log ...
- VSCode添加 console.log 快捷键
file - preferences - keyboard shortcuts - keybindings.json: 添加: { "key": "ctrl+ ...
随机推荐
- 第二季第十天 es6新特性新特性
1.set的应用(去重)js标准内置对象 适用范围:String,Array(数字基本数据类型不可以) set的方法:例子 var s = new Set(data) 增加: s.add(data) ...
- eureka学习之二:自我保护机制
提供者和消费者:消费者通过注册服务名称,找rpc远程地址,调用提供者的接口 Eureka的自我保护机制:
- numpy 加速 以及 ipython
先安装openblas, 然后用pip 安装numpy sudo ln -s /usr/lib64/libopenblas-r0.2.14.so /usr/lib64/libopenblas.so 为 ...
- 17.3.13--python编码问题
1----字符编码: 字符编码(英语:Character encoding).字集码是把字符集中的字符编码为指定集合中某一对象(例如:比特模式.自然数串行.8位组或者电脉冲),以便文本在计算机中存储和 ...
- [GX/GZOI2019]旅行者(dijkstra)
二进制分组SB做法没意思还难写还可能会被卡常其实是我不会写.用一种比较优秀的O(Tnlogn)做法,只需要做2次dijkstra.对原图做一次.对反图做一次,然后记录每个点的最短路是从k个源点中的哪个 ...
- Linux基础篇二:Bash shell(壳,命令解释器)介绍
shell执行方式: 第一:输入命令 (简单工作) 第二: 脚本 (适合大量工作) Bash shell 实际上的叫法是 GNU/Bash 如何查询呢: bash - version ...
- logService
vpackage org.linlinjava.litemall.admin.service; import org.apache.shiro.SecurityUtils; import org.ap ...
- transcription-coupled repair|Germ|HK|TS|Mutation|四类变异
生命组学-可遗传变异 GC content:碱基: GC content不同的植物对应的gene length,可看作上图的转置: 由GC content看出来碱基变异程度,可以找到对应碱基改变,所以 ...
- Java源码之ArrayList
本文源码均来自Java 8 总体介绍 Collection接口是集合类的根接口,Java中没有提供这个接口的直接的实现类.Set和List两个类继承于它.Set中不能包含重复的元素,也没有顺序来存放. ...
- Java多线程基础详解
基础概念进程进程是操作系统结构的基础:是一次程序的执行:是一个程序及其数据在处理机上顺序执行时所发生的活动.操作系统中,几乎所有运行中的任务对应一条进程(Process).一个程序进入内存运行,即变成 ...