如何在浏览器控制台(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调试下代码,发现控制台什么信息都 ...
随机推荐
- [na]二层+tcp/udp数据包格式
标准:6+6+2+3 =17 3 思科:6+6+2+3+3=20 6 ip首部格式 tcp首部格式
- 【Android】17.5 利用Messenger实现进程间通信（IPC）
分类:C#.Android.VS2015: 创建日期:2016-03-03 一.Messager类简介 本章前面曾经说过,要在Android上执行带服务的进程间通信(IPC),既可以用Messenge ...
- vue自动化单元测试
// 引用vue和需要测试的组件 import Vue from 'vue' import HelloWorld from '@/components/HelloWorld' // 创建测试套件,一个 ...
- Jbpm4.4 使用
最近工作项目中需要用到工作流.于是找到了jbpm.关于jbpm的一些概念就不说了 1) 首先下载jbpm,这里我选择了jbpm4.4 从官网上可以下载 http://sourceforge.net/ ...
- PHP 友好的dump
/** * 浏览器友好的变量输出 * @param mixed $var 变量 * @param boolean $echo 是否输出 默认为True 如果为false 则返回输出字符串 * @par ...
- 一款基于jQuery可放大预览的图片滑块插件
今天给大家分享一款基于jQuery可放大预览的图片滑块插件.这款jQuery焦点图插件的特点是可以横向左右滑动图片,并且点击图片可以进行放大预览,唯一的缺陷是这款焦点图并不能循环切换,如果你有较好的J ...
- Rocket重试机制，消息模式，刷盘方式
一.Consumer 批量消费(推模式) 可以通过 consumer.setConsumeMessageBatchMaxSize(10);//每次拉取10条 这里需要分为2种情况 Consumer端先 ...
- Ubuntu下SSH安装及提高SSH登陆认证速度的办法
Ubuntu 下安装 OpenSSH Server 是无比轻松的一件事情,需要的命令只有一条: sudo apt-get install openssh-server (查看返回的结果,如果没有出错, ...
- openwrt内核配置选项添加
摘自:http://blog.csdn.net/weiniliuchao/article/details/50295527 增加内核配置选项 openwrt的.config文件中,关于内核的选项都是形 ...
- R语言绘制沈阳地铁线路图
##使用leaflet绘制地铁线路图,要求 ##(1)图中绘制地铁线路 library(dplyr) library(leaflet) library(data.table) stations< ...