如何在浏览器控制台(console)里输出彩色样式调试信息
console.log(XX,XX,XX)
log 的第一个参数声明第二、第三个参数的作用，第二个参数就是样式，第三个参数是要输出的字符串
console.log("%c%s",
"color: green; font-size: 100px;font-weight:bolder",
"ABC");
console.log('\n ██████\n ██ ██\n ██ ██\n ██ ██ ████\n ██████ ██ ██\n ██ ██ ████████\n ██ ██ ██\n ██ ██ ████\n\n');
var t="%c%s",i="color:green;text-shadow:15px 15px 5px #fff, 15px 15px 10px #373E40, 15px 15px 15px #A2B4BA, 15px 15px 30px #82ABBA;font-weight:bolder;font-size:15px";
var a="color:#495A80;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 1px 0 #bbb;font-size:20px";
var s=" iiii QQQQQQQQQ iiii iiii\n"+"i::::i QQ:::::::::QQ i::::i i::::i\n"+" iiii QQ:::::::::::::QQ iiii iiii\n"+" Q:::::::QQQ:::::::Q\n"+"iiiiiii Q::::::O Q::::::Q iiiiiii yyyyyyy yyyyyyy iiiiiii\n"+"i:::::i Q:::::O Q:::::Q i:::::i y:::::y y:::::y i:::::i\n"+" i::::i Q:::::O Q:::::Q i::::i y:::::y y:::::y i::::i\n"+" i::::i Q:::::O Q:::::Q i::::i y:::::y y:::::y i::::i\n"+" i::::i Q:::::O Q:::::Q i::::i y:::::y y:::::y i::::i\n"+" i::::i Q:::::O Q:::::Q i::::i y:::::y y:::::y i::::i\n"+" i::::i Q:::::O QQQQ:::::Q i::::i y:::::y:::::y i::::i\n"+" i::::i Q::::::O Q::::::::Q i::::i y:::::::::y i::::i\n"+"i::::::i Q:::::::QQ::::::::Q i::::::i y:::::::y i::::::i\n"+"i::::::i QQ::::::::::::::Q i::::::i y:::::y i::::::i\n"+"i::::::i QQ:::::::::::Q i::::::i y:::::y i::::::i\n"+"iiiiiiii QQQQQQQQ::::QQ iiiiiiii y:::::y iiiiiiii\n"+" Q:::::Q y:::::y\n"+" QQQQQQ y:::::y\n"+" y:::::y\n"+" y:::::y";
console.log(t,i,s);
var i="";
var t="%c";
var zhihu=" _____ _____ _____ _____ \n /\\ \\ /\\ \\ /\\ \\ /\\ \\ \n /::\\____\\ /::\\ \\ /::\\ \\ /::\\ \\ \n /:::/ / \\:::\\ \\ /::::\\ \\ /::::\\ \\ \n /:::/ / \\:::\\ \\ /::::::\\ \\ /::::::\\ \\ \n /:::/ / \\:::\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\ \n /:::/____/ \\:::\\ \\ /:::/__\\:::\\ \\ /:::/__\\:::\\ \\ \n /::::\\ \\ /::::\\ \\ /::::\\ \\:::\\ \\ /::::\\ \\:::\\ \\ \n /::::::\\ \\ _____ ____ /::::::\\ \\ /::::::\\ \\:::\\ \\ /::::::\\ \\:::\\ \\ \n /:::/\\:::\\ \\ /\\ \\ /\\ \\ /:::/\\:::\\ \\ /:::/\\:::\\ \\:::\\____\\ /:::/\\:::\\ \\:::\\ \\ \n/:::/ \\:::\\ /::\\____\\/::\\ \\/:::/ \\:::\\____\\/:::/ \\:::\\ \\:::| |/:::/__\\:::\\ \\:::\\____\\\n\\::/ \\:::\\ /:::/ /\\:::\\ /:::/ \\::/ /\\::/ |::::\\ /:::|____|\\:::\\ \\:::\\ \\::/ /\n \\/____/ \\:::\\/:::/ / \\:::\\/:::/ / \\/____/ \\/____|:::::\\/:::/ / \\:::\\ \\:::\\ \\/____/ \n \\::::::/ / \\::::::/ / |:::::::::/ / \\:::\\ \\:::\\ \\ \n \\::::/ / \\::::/____/ |::|\\::::/ / \\:::\\ \\:::\\____\\ \n /:::/ / \\:::\\ \\ |::| \\::/____/ \\:::\\ \\::/ / \n /:::/ / \\:::\\ \\ |::| ~| \\:::\\ \\/____/ \n /:::/ / \\:::\\ \\ |::| | \\:::\\ \\ \n /:::/ / \\:::\\____\\ \\::| | \\:::\\____\\ \n \\::/ / \\::/ / \\:| | \\::/ / \n \\/____/ \\/____/ \\|___| \\/____/ \n";
console.log(t,i,zhihu);
如何在浏览器控制台(console)里输出彩色样式调试信息的更多相关文章
- IntelliJ IDEA控制台Console里没有查找快捷键
问题描述:之前的项目一直用的 Eclipse,习惯了其快捷键的使用,现在的项目换到IntelliJ IDEA,为了尽快上手,就把快捷键Keymap修改为Eclipse方式.发现在控制台Console里 ...
- 浏览器控制台console的使用
前天在团队项目中因为产品需求在提交订单的时候需要多个页面的数据作为提交接口的参数,这种需求让人醉醉的,项目用angular来做的,没办法只能用全局变量来定义要交互的值和localStorage来临时的 ...
- ASP.NET后台怎么输出方法中间调试信息?
后台方法,不止是aspx.cs,而是页面调用的一些其它方法.想调试这些方法,我以前winform都是MessageBox.Show一些中间结果,现在我也想用这种方式.但想想,网页会触发 Message ...
- 浏览器控制台console
console对象 console对象代表浏览器的JavaScript控制台.虽然它还不是标准,但是各大浏览器都原生支持,已经成为事实上的标准. console对象主要有两个作用: 显示网页代码运行时 ...
- 有趣的console.log（console.log输出彩色字，图片等）
亲们支持我的新博客哦==>原文地址 ) 逛网站的时候经常发现很多网站控制台打印了很好玩的内容 比如我的网站 →calamus 或者知乎→ 平时是不是只用console调试或者打印别的信息了,没有 ...
- Eclipse CDT 调用printf/cout 控制台(console)无输出
转摘自:http://blog.csdn.net/dj0379/article/details/6940836 症状描述: 用Eclipse调试程序,执行printf和cout函数,但是console ...
- chrome浏览器控制台 console不打印信息问题解决办法
谷歌浏览器控制台不能显示consle打印的东西,我记得之前可以正常打印,代码没问题,可能是你在浏览器中无意间点到了fifter,我们2可以使用最简单粗暴的方法---->恢复默认值. 按下F12, ...
- Node.js中的console.log()输出彩色字体
转自:https://www.jianshu.com/p/cca3e72c3ba7 console.log('\033[42;30m DONE \033[40;32m Compiled success ...
- chrome浏览器控制台 console不打印信息问题解决办法。
转自:https://blog.csdn.net/wang17866603359/article/details/79083776 最近换了安装chrome,想按F12调试下代码,发现控制台什么信息都 ...
随机推荐
- 每日英语：Apple's Latest iPhone Puts Focus Back on Fingerprint Security
Apple's latest product launch could breathe new life into a technology that failed to take hold the ...
- innerHTML与innerText区别
document 对象中有innerHTML和innerText 两个属性, 这两个属性都是获取document对象的文本内容的,这两个属性间有哪些区别呢?通过几个例子来看一下. 示例1 <ht ...
- vue使用sweetalert2弹窗插件
1). 安装 sweetalert2 npm install sweetalert2@7.15.1 --save 2). 封装 sweetalert2 在 src 新建 plugins 文件夹,然后新 ...
- js 中object对象的操作
n = object对象 for(var p in n){ console.log(p);// 取得是key值 console.log(n[p]);//取得是value值 } 继之前js中数组的常用方 ...
- Linux 下 tail 命令
简述 tail命令从指定点开始将文件写到标准输出,使用tail命令的“-f”选项可以方便的查阅正在改变的日志文件,“tail -f filename”会把filename里最尾部的内容显示在屏幕上,并 ...
- 阿里云ECS，WampServer无法访问外网
情况: 使用阿里云ECS服务器.服务端打开WampServer后,在服务端能通过127.0.0.1和localhost访问到WampServer的首页. 阿里云已经给了外网IP,不需要路由器再做端口映 ...
- 【C#/WPF】Image图片的Transform变换：平移、缩放、旋转
WPF中图像控件Image的变换属性Transform: 平移 缩放 旋转 即要想实现图片的平移.缩放.旋转,是修改它所在的Image控件的Transform变换属性. 下面在XAML中定义了Imag ...
- java资料——线程（转）
线程 线程,有时被称为轻量级进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程ID,当前指令指针(PC),寄存器集合和堆栈组成.另外,线程 ...
- 我的开源主页Blog Lite配置指南
JinHengyu.github.io --- Blog Lite 0.1.1 好看的东西看多了就会不好看, 简单的东西永远不会难看 GitHub Pages 提供静态网站托管服务的厂商还是很多的, ...
- warning LNK4099: PDB 原因及解决方案
0x00 现象及原因举例: warning LNK4099: PDB 'wxbase30ud.pdb' was not found with 'wxbase30ud.lib(any.obj)'使用VC ...