如何在浏览器控制台(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调试下代码,发现控制台什么信息都 ...
随机推荐
- mysql 下载
mysql 下载
- 基于Django的独立运行python脚本开发
Django框架很方便,比如其方便的ORM,如果写基于Django的独立运行脚本,主要在脚本前面加上以下代码: import sys,os,django sys.path.append(os.path ...
- redis性能提升
1.redis请求执行原理redis客户端与redis服务器之间使用TCP协议进行连接,一个科幻可以通过一个socket连接发送多个请求命令,但每个请求命令发出后client通常会阻塞并等待redis ...
- ny613 免费馅饼
免费馅饼 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 都说天上不会掉馅饼,但有一天gameboy正走在回家的小径上,忽然天上掉下大把大把的馅饼.说来gameboy的人 ...
- 如何創建一個自己的 Composer/Packagist 包 (PHP)
如何創建一個自己的 Composer/Packagist 包 首先讓我們踏着歡快的腳步去Github創建一個新庫,這裏取名 composer-car,又歡快的將它克隆到本地: git clone ht ...
- Python 2.7.9 Demo - 003.01.只允许相同缩进
Right #!/usr/bin/python if True: print ("True"); print('Again'); else: print ("False& ...
- 小tip: 如何让contenteditable元素只能输入纯文本
div模拟textarea文本域轻松实现高度自适应 这篇文章发布于 2010年12月23日,星期四,22:07,归类于 css相关. 阅读 112630 次, 今日 40 次 by zhangxinx ...
- c++之---初探重载操作符
#include<iostream> using namespace std; class Test { friend Test addTest(Test &obj1, Test ...
- js获取checkbox值的方法
js获取checkbox值的方法.分享给大家供大家参考.具体实现方法如下:<html> <head> <meta http-equiv="Content-Typ ...
- Linux Ubuntu下软件包管理
自己整理的一个关于dpkg, apt, aptitude三者的常用命令,方便以后查阅. dpkg: dpkg是用来安装.deb文件,但不会解决模块的依赖关系,且不会关心ubuntu的软件仓库内的软件, ...