如何在浏览器控制台(console)里输出彩色样式调试信息

console.log(XX,XX,XX)

  log 的第一个参数声明第二、第三个参数的作用,第二个参数就是样式,第三个参数是要输出的字符串

如何在浏览器控制台(console)里输出彩色样式调试信息

console.log("%c%s",
"color: green; font-size: 100px;font-weight:bolder",
"ABC");

如何在浏览器控制台(console)里输出彩色样式调试信息

  

 console.log('\n  ██████\n  ██    ██\n  ██    ██\n  ██    ██    ████\n  ██████    ██    ██\n  ██    ██  ████████\n  ██    ██  ██\n  ██    ██    ████\n\n');

如何在浏览器控制台(console)里输出彩色样式调试信息

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);

如何在浏览器控制台(console)里输出彩色样式调试信息

  

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);

  

  

上一篇:oracle当需要commit


下一篇:WEB架构师成长之路 一