[JS]控制台多样式输出

近期在对博客主题中的控制台输出做修改优化，发现 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`

console.log("log");
console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");

效果

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

效果

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

效果

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

效果

1
2
3

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

效果

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

效果

1	console.dir(document.body);

效果

占位符

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等每个方向同

显示logo

图片logo可以使用 background-image 相关属性处理；
纯文字logo可以直接多行输出配上样式即可，以下是一些艺术字的生成网页，可以根据需要选择喜欢的艺术字作为logo：