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

console.log(XX,XX,XX)

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

 

?

1 2 3

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

　　

?

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

 

?

1 2 3 4

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

 

　　

 

?

1 2 3 4

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