如果碰到以下，多人协作项目，为了调试自己的代码，需要打印部分信息，单纯通过======或者*****等作为标志，分界线还是容易混乱，可以调取特殊api，在控制台打印出突出的信息

---

一、原生 console API

1. console.log/console.error/console.warn

2. console.table

以表格形式打印对象/数组

3. console.group/groupEnd

可折叠的日志组，一般用来当页面数据复杂，函数数值变动频繁，且回调繁多的时候，在每个函数里面建立一个group方便调试

javascript">console.group("分组1")
console.log("分组1-1")
console.log("分组2-2")
console.groupEnd()

4. console.trace

类似查看多个回调调用关系，输出当前的调用栈：

javascript">function fun() {console.trace("查看调用栈");
}
fun();

4. 携带css样式

1. 单一样式

javascript">let a = 1111
let arr = [1,2,3]
let obj = {name:"张三",age:18}
// “+”拼接的方式，拼接给定样式的字段
console.log("%c" + a, "color:red;");
console.log("%c" + arr, "color:blue;");
console.log(arr);
console.log("%c" + obj, "color:green;");
console.log(obj);

在使用 console.log 时，%c 是一个占位符，用于指定后续的 CSS 样式。当你使用%c 时，它会将后面的内容视为字符串，并应用指定的样式。因此，当你尝试使用 %c 打印一个对象时，JavaScript 会将该对象转换为字符串 [object Object]，然后应用样式。

javascript">console.log("%c 红色","color:red;");
console.log("%c 背景色","color:white;background-color:black;");
console.log("%c 字体大小","font-size:20px;");
console.log("%c 字体粗细","font-weight:bold;");

2. 组合样式

以，分隔 “ 样式1 ” 和 “ 样式2 ”

javascript">console.log("%c error：%c 区分颜色", "color: red; font-weight: bold;", "color: blue;");

3. 携带icon

icon数量多，相比以#####和*****区分更直观

javascript">console.log("%c😁携带icon", "background: black; color: white; font-size: 18px; padding: 5px 10px; border-radius: 5px;");

二、npm包

1. chalk

可组合 API，只需在其中链接和嵌套所需的样式即可，同作者更加轻量级的包还有YoctoColors

javascript">// 下载安装
npm install chalk
import chalk from 'chalk'

使用方法如下，详情可见官网，支持多种修饰符，颜色，背景色

javascript">// 链式API
console.log(chalk.blue.bgRed.bold('Hello world!'));// 多个参数
console.log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));// 嵌套
console.log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));// 使用RGB颜色
console.log(chalk.rgb(123, 45, 67).underline('Hello'));
console.log(chalk.hex('#DEADED').bold('Hello'));

2. loglevel

基本上自带API能完成大部分的调试，如果为了方便，可以选取下载npm包。