1. 基本语法:
console.log(object [, object, …])
2. 占位符:
console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o):
占位符 | 作用 |
---|---|
%s | 字符串 |
%d or %i | 整数 |
%f | 浮点数 |
%o | 可展开的DOM |
%O | 列出DOM的属性 |
%c | 根据提供的css样式格式化字符串 |
- 图片输出
console.log("%c","background:url(图片路径) no-repeat;padding:50px 300px;line-height:120px");
- 换行输出
console.log([
"第一行",
"第二行"
].join('\n'));
不过要注意了:
- console不能定义img,因此用背景图片代替。
- console不支持width和height,利用空格和font-size代替;还可以使用padding和line-height代替宽高。
- chrome没出来?没出来就对了……不支持啊!原因是ConsoleViewMessage.js源码把url和谐掉了。不过可以下载firebug插件查看啦~ gif图片也是支持的~~~
- console是默认换行的。
控制台样式案例:
console.log("%c响应数据%c"+new Date(),
'background: #00cc00; color: #fff; border-radius: 3px 0 0 3px;padding:2px 5px',
'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;padding:2px 5px',
)
制作我们自己的字符图案:
ASCII字符画制作工具,图片转ascll字符
img2txt
ASCII Generator Portable(将图片转为字符画) v2.0下载
制作思路:找到一个我们喜欢图案,变成这样的字符形式,然后字符形式的图案的换行(\r\n)都去掉,换成 \n,这样就能正确的在console.log()中正确打印。