一直很好奇 度娘的控制台是怎么玩的,控制台的颜色还可以改变,很好奇,然后就网上Find的了关于console控制台的花样玩法,原来是console.*可以添加css样式,这个结果挺让我意外的...

console控制台也可以玩出花?给console.log返回值加样式。-Qui-Note

像这样:

console.log("你好啊,%c控制台",'color:red');

或像这样:

const sty02 = [
  'color: red', 
  'background: yellow', 
  'font-size: 54px',
  'border: 3px dashed red',
  'padding: 10px',
].join(';');
// 2. 利用join方法讲各项以分号连接成一串字符串
// 3. 传入styles变量
console.log('%cCSS样式都支持', sty02);

当然也可以这样:

const sty01 = ['background: #111111','color: #ddd'].join(';');
const msg = ' QUI V3.0';
console.log("****插件****")
console.log('%c%s', sty01, ' jquery.js V2.14 https://jquery.com/');
console.log('%c%s', sty01, ' vue.js V2.6.1 https://cn.vuejs.org/index.html');
console.log('%c%s', sty01, msg + ' http://ui.51qux.com/');
console.log("...")

使用方法:
他们有个共同点都是 %c 开头,我猜测试“启用css”的意思,在需要加样式的字符前面添加 %c ,后面的字符串都会加上样式(链接除外)。

那有的同学发现了 %s ,这又是个什么玩意?其实除了 %s,还有%d 、%o 、%f ......

  • %s  字符类型
  • %d  整型
  • %f  浮点类型number
  • %o  对象类型超链接

%c%s 连起来就是给指定数据类型加样式,你明白了吗?

控制台打印结果出了console.log之后还有:console.info、console.debug、console.info、console.warn、console.warn、console.error、console.table等等都可以添加自定义样式哦!有时间的朋友可以玩一玩:

const sty03 = ['color:green'].join(';'); 
console.log('%cconsole.log', sty03);
console.info('%cconsole.info', sty03);
console.warn('%cconsole.warn', sty03);
console.error('%cconsole.error', sty03);
let tables = [
    {
        name: "张三",
        sex : "男",
        age : "27"
    },
    {
        name: "李四",
        sex : "女",
        age : "28"
    },
    {
        name: "王二",
        sex : "匿名",
        age : "29"
    }
]
console.table(tables)

整体效果如下:

console控制台也可以玩出花?给console.log返回值加样式。-Qui-Note