js console.log 花样玩法: 输出图片

 基本用法

console.log()    // 打印日志
console.debug()  // 打印调试
console.error()  // 打印错误
console.info()   // 打印信息
console.warn()   // 打印警告
console.assert() // 打印断言
console.clear()  // 清空

%c表示css样式

console.log('%cReturn.com', 'color: #43bb88;font-size: 24px;font-weight: bold;text-decoration: underline;');

结果:

上面%c是将后面的内容加上样式

那即然能输出样式,是不是也能用background:url() 输出图片呢? 当然! 但必需要有内容,如下面的代码,

// 注意: "%c " %c后面有个空格
console.log("%c ", "padding:112px 150px;background:url('http://returnc.com/frontend/images/console.gif') no-repeat;");

结果:

再就是一些常规用法,个人觉得没有css的可塑性高,要整出花来比较困难

%d表示数字

console.log('%d', 123);

%i表示整型数字

console.log('%i', 123);

%o表示DOM元素

console.log('%o', document.body);

%O表示javascript对象

console.log('%O', new Date());