近期在对博客主题中的控制台输出做修改优化，发现 console.log 可以有挺多的玩法，记录一下以供后续改进。

不同的环境可能会有所差异，本文使用环境为 Microsoft Edge 124.0.2478.97 ，具体显示效果需自行体验。

基本说明

console输出函数

console 常用输出函数有以下几种：

类型 函数 说明
通用 console.log(...) 直接输出内容，差别在于输出的颜色与图标不同
console.debug(...)
console.info(...)
console.warn(...)
console.error(...)
表格 console.table(obj) 将两层嵌套的对象显示为table
时间差 console.time(str) 标记开始时间
console.timeEnd(str) 与开始时间做差值显示
断言 console.assert(bool, ...) 第一个参数为 false 时显示
次数 console.count(str) 显示出现次数
层级 console.group(str) 开始按层级显示
groupCollapsed(str) 同 console.group() ，显示为折叠状态
console.groupEnd() 结束层级
对象 console.dir(obj) 显示对象，同占位符里的 %O 
1
2
3
4
5
console.log("log");
console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");

效果

console通用显示效果

1
2
3
4
console.table({
  "a":{1:"test1",2:"test2"},
  "b":{1:"test3",2:"test4"}
  })

效果

console表格显示效果

1
2
console.time("test");
setTimeout(() => console.timeEnd("test") ,1000);

效果

console时间差显示效果

1
console.assert(1 === 4, "1不等于4");

效果

console断言显示效果

1
2
3
for(let i = 0; i < 3; i++) {
    console.count("次数");
}

效果

console次数显示效果

1
2
3
4
5
6
7
8
9
console.group("1");
console.log("1-1");
console.log("1-2");
console.group("1-3");
console.log("1-3-1");
console.log("1-3-2");
console.groupEnd();
console.log("1-4");
console.groupEnd();

效果

console层级显示效果

1
console.dir(document.body);

效果

console对象显示效果

占位符

console.log() 等可以使用 C 语言 printf() 风格的占位符，总共支持以下五种

占位符 描述
%s 字符串
%i或%d 整数
%f 浮点数
%o或%O 对象，对于DOM节点输出不一样
%c 样式，作用范围到下一个 %c 或字符结尾

进阶

显示样式

控制台可以根据设置的样式显示不同的效果，每个 %c 需要对应一种样式，否则可能直接输出字符 “%c” 或 错位显示。

目前已尝试可以使用的样式类型：

类型 css 备注
字体 color
font 以及其每种属性 font: font-style font-weight font-size/line-height font-family;
背景 background 以及其每种属性 常用的如：
background-color
background-image （chrome需要用base64图片格式代替网址）
background-repeat
background-size
边框 border 以及其每种属性 border: border-width border-style border-color;
border-top等每个方向同
border-radius
border-image
边距 padding padding-top等每个方向同
margin margin-top等每个方向同
  1. 图片logo可以使用 background-image 相关属性处理；
  2. 纯文字logo可以直接多行输出配上样式即可，以下是一些艺术字的生成网页，可以根据需要选择喜欢的艺术字作为logo：