JavaScript 的调试一直与控制台的 console API 相关联。而大多数情况下，我们仅仅通过console.log使用。

当我们厌倦了日志枯燥的输出，是否想着让日志变得更加美观？下面我将介绍一些方法，我们将会发现真正丰富多彩的 Console API 会变得多么有趣！

console.log

console.log可能存在一些我们不知道的附加功能，但是我们都了解其基本功能是不变的，那就是日志打印 ( logging )。我现在要做的是，就是美化console.log，使日志打印的更加漂亮。（我记得有一个专门美化 console 的包，不过忘了包名）

String Subs 字符串替换

与console.log联系最紧密的一个特点就是我们可以通过某个字符串指令来替换我们需要打印的内容。这提供了在字符串中使用特定表达式的选项，该表达式以后将由提供的参数替换。比如：

  1. console.log("Object value: %o with string substitution", {name: 'rabbit'});
  2. ====>
  3. Object value: {name: "rabbit"} with string substitution

同时，console.log提供了多种字符串指令来替换表达式

  • %o / %O - 对象 (Object)
  • %d / %i - 整数 (Integer)
  • %s - 字符串 (String);
  • %f - 浮点数 (Floating-point numbers)

但实际上，上面的功能在 Java 等语言需要使用，似乎在 JS 中不需要，因为在 JS 中，可以直接这样使用：

  1. console.log("Object value:", {name: 'rabbit'}, " with string substitution", );

上面只是告诉你 console.log 存在这个功能，未来可能会存在特定场景去使用。

CSS

还有一个我们以前从未学过的类似字符串指令 -％c，它允许我们将 CSS 样式字符串应用于日志打印！ 😮让我告诉你如何使用它！

  1. console.log("Example %cCSS-styled %clog!",
  2.     "color: red; font-family: monoscope;",
  3.     "color: green; font-size: large; font-weight: bold")

上面的 %c 是显示在需要样式化的字符串前面，然后在打印的字符串后面进一步对样式参数逐一提交 😉。比如这里的两个 CSS 样式。

让你的console更加具有创意 - 掘金 - 图1

注意 CSS 参数需要逐一跟上字符串后面，如果存在两个%c，而只跟了一组 CSS 样式，默认表示多余的%c为字符串。

Grouping & tracing

在上面我们了解了通过字符串指令来使得console.log的日志打印更加美观，实际上，我们才刚刚起步

Grouping —-> console.group 字符串指令

过多地使用console.log控制台日志打印并不是很好，因为它可能导致可读性降低，从而导致一些毫无意义的日志打印，因此有一些适当的结构总是好事。

我们可以使用console.grou来实现。通过使用该方法，可以在控制台中创建深层、可折叠的结构 - 组！这样不仅可以隐藏，还可以组织日志。

如果要默认折叠组 (group)，则还有一个console.groupCollapsed方法。当然，组可以嵌套任意数量的嵌套。我们还可以通过向其传递参数列表来使日志打印组具有类似于标题的头日志。同时，如果我们要退出它，必须使用特殊的console.groupEnd方法。

  1. console.group; ===> 创建一个组
  2. console.log("第一层组"); ====> 组内第一层组日志
  3. console.group; ===> 没有结束，创建组内的组
  4. console.log("第二层组"); ===》 创建第二层组日志
  5. console.log("第二层组2");
  6. console.groupEnd; ===> 最深层组结束
  7. console.groupEnd; ===> 类推，上层组结束
  8. console.log("外部日志"); ===> 不属于组的日志

让你的console更加具有创意 - 掘金 - 图2

Tracing console.trace

另外一个有用的 Console API 就是console.trace，通过该 API 我们可以知道代码当前调用的路径（执行路径 / 堆栈跟踪）。

一串代码内代码会将已执行的链接（例如函数链）放置到当前的console.trace调用中，无论是检测副作用还是检查代码流，此 API 都非常有用。

  1. console.trace("日志记录");

console.XXX

除了介绍了字符串指令，后续还简单的介绍了一下关于console.group与console.trace的使用，我们发现 Console API 不仅仅只存在 log 函数，还存在 group 与 trace 函数，实际上 Console API 还存在更多的 console.XXX。

Warn

console.warn方法的行为与console.log相似，但是除此之外，它还具有类似警告的风格。 在大多数浏览器中，会打印应为黄色的⚠符号。默认情况下，对此方法的调用还会返回跟踪，因此我们可以快速找到警告（以及可能的错误）的出处。

  1. console.warn("警察👮，不要动！");

Error

console.error方法类似于console.warn输出带有堆栈跟踪的消息。该消息具有特殊样式，通常为红色，并带有错误图标，这也是我们平常写代码最不愿意见到的日志打印。

  1. console.error("分手吧，你是个好人！");

Info & Debug

此外，console.info和console.debug方法也可以让我们对日志进行处理输出，这些输出并不总是具有独特的样式。在某些浏览器中，它只是一个信息图标。相反，这些方法以及以前的方法允许我们对控制台消息进行分类。在不同的浏览器中（例如在我的基于 Chromium 的浏览器中），开发工具用户界面为您提供了选择显示特定类别日志的选项，例如错误，调试消息或信息。这只是一项额外的组织功能！

让你的console更加具有创意 - 掘金 - 图3

如图所示（chrome 浏览器），上面对我们控制台打印的日志进行了分类。

  1. console.info("国庆节快到了");
  2. console.debug("看看工资剩下多少了");

Assert

console.assert允许我们对日志记录增加断言。就像标准console.log方法一样，它可以接受无数个参数，不同之处在于第一个参数必须为布尔值。如果解析为 true，则断言保持静默（与console.log方法类似），否则，它将使用所有传递的参数将错误（与console.error方法相同）记录到控制台。

  1. console.assert(true, "静默，不会被静默");
  2. console.assert(false, "取消静默，错误打印");

Timing

Console API 甚至提供了一小组与计时相关的功能。 我们通过 Timing 可以对部分代码进行快速而肮脏的性能测试。console.time该方法可以使用可选参数作为给定计时器的标签或标识。提到的计时器仅在调用此方法时启动。然后，我们可以使用console.timeLog和console.timeEnd方法（带有可选的 label 参数）来记录时间（以毫秒为单位），并相应地结束相应的的计时器。

  1. console.time(); 
  2. console.timeLog(); 
  3. console.timeEnd();

当然，如果您要进行一些基准测试或性能测试，我建议使用Performance API，这是专门为此目的而设计的。

Counting

当我们有太多的日志，而不知道代码的给定部分已经执行了多少次，console.count方法你就用对了。console.count可能会执行其最基本的操作 - 计算其被调用的次数。 同时，我们也可以传递一个可选参数，为给定计数器提供标签（默认为字符串 default）。使用console.countReset方法重置选定的计数器。

  1. console.count(); 
  2. console.count(); 
  3. console.count(); 
  4. console.countReset();
  5. console.count(); 
  7. console.count('number') 
  8. console.count('number') 
  9. console.count('number')

Tables

我认为这是 Console API 最被低估的功能之一（除了前面提到的 CSS 样式之外）。 debugging 在调试和检查平面或二维对象和数组时，将真实的可排序表格输出到控制台的功能非常有用。通过console.table可以在控制台打印表格。

  1. console.table([[0,1,2,3,4], [5,6,7,8,9]]);

让你的console更加具有创意 - 掘金 - 图4

Modern logs

原来，控制台日志和调试过程总体上不必如此单一！除了简单的console.log之外，还有更多方法。我们可以使用传统的console.log和浏览器提供的不同结构的非常精细的格式，也可以使用上述技术为控制台添加一些新鲜度。

赶紧去试一下吧！👏👏👏

原文地址：areknawo.com/getting-cre…
https://juejin.im/post/6844903954136973325#heading-11