原文：Getting creative with the Console API!

作者：Twitter Facebook

译者：Zavier Tang

在对 JavaScript 程序进行调试时始终离不开 Console API，而我们大部分时间都仅仅是使用 console.log() 来完成工作。但是，你知道吗？我们并不是必须得这样的，你难道没有觉得 console.log() 的单块输出很让人感到厌烦吗？其实，你可以让你的 Console 控制台变得更好、更具可读性💅。

Console.log()

信不信由你，console.log() 本身就有一些你可能不知道的特性。当然，它的最基本用途就是打印日志。我们唯一能做的就是让它看起来更具可读性！

替代字符串

与 console.log() 方法密切相关的惟一一件事就是，你可以将它与所谓的替代字符串（String subs）一起使用。这为你提供了一个在字符串中使用特定表达式的功能，它将被所提供的参数给替换。如下：

console.log("Object value: %o with string substitution",
    {string: "str", number: 10});

控制台结果如下：

字符串替换表达式还有其他的一些形式：

%o / %O - 代表 objects;
%d / %i - 代表 integers;
%s - 代表 strings;
%f - 代表 floating-point numbers;

但是，你可能会想为什么要使用这样的功能呢？不使用替代字符串，你同样可以非常方便的传递多个值到打印的日志中，如下：

console.log("Object value: ",
    {string: "str", number: 10},
    " with string substitution");

也许，对于字符串和数字，你可以只使用字符串字面量的形式。但是，我想说的是，在做一些可读性较高的控制台日志输出时，你需要较好地输出字符串格式，而替代字符串（string subs）可以让你轻松地做到这一点！对于以上的选择，你必须同意。替代字符串（string subs）它会是更方便。至于字符串字面量，它们还没有这些像**替代字符串（string subs）**一样方便的特性，以及它们没有为对象提供相同的、漂亮的格式。但其实，如果你只要处理数字和字符串，你可能更喜欢一个不同的方式。

CSS

还有一个我们以前没有学过的类似替代字符串的指令。它是 ％c，它允许你将 CSS 样式应用于你输出打印的内容中！ 😮

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

控制的结果如下：

上面的例子使用了 ％c 指令。正如你所见，样式应用于 %c 指令后面的所有内容。通过使用另一个 %c 指令来闭合样式的使用。如果要使用普通的，无格式的日志内容，则需要为 %c 传递一个为空的字符串。需要注意的是，提供给 ％c 指令以及其他替代字符串的参数需要以正确的顺序添加。😉

分组打印 & 打印执行路径

我们才刚刚开始，上面我们已经在日志中引入了 CSS 样式。接下来让我们来看一下 Console 还有哪些其他的秘密呢？

分组打印

太多的控制台日志输出并不是一个很好的操作，它可能导致很糟糕的可读性，从而导致没有太多意义的日志输出。所以，输出结构化的日志总是好的。

你可以使用 console.group() 来实现。通过使用该方法，你可以在控制台中输出深层可折叠的结构（组），它可以更好的组织你的日志输出。如果你希望在默认情况下折叠你的组，还有一个 console.groupCollapsed() 方法。当然，嵌套组也可以根据你的需要进行嵌套。你还可以通过向其传递参数列表（就像使用console.log()），使你的组具有类似于日志头的形式。在使用 group 方法时，每个 console 都将在创建的组中找到它的位置。可以使用 console.groupEnd() 方法来闭合一个组。

console.group();
console.log("Inside 1st group");
console.group();
console.log("Inside 2nd group");
console.groupEnd();
console.groupEnd();
console.log("Outer scope");

我想你已经注意到了，你可以将所有提供的代码段中的代码复制并粘贴到你的控制台，并以你想要的方式尝试它们！

控制台结果如下：

打印执行路径

你可以通过 Console API 获得的另一个有用信息是当前调用的路径（执行路径 / 堆栈跟踪）。你知道吗，会有一个列表放置了被执行的链接（例如函数链），当 console.trace() 被调用时，将获得它的执行路径，这就是我们正要谈论的方法。无论是检测副作用还是检查代码流，这些信息都是非常有用。只需将下面的代码拷贝到你的控制台中即可看到结果。

console.trace("Logging the way down here!");

控制台结果如下：

Console.XXX

你可能已经了解到了一些 Console API 有趣的方法。接下来，我们马上要讨论的是关于在日志中添加一些额外的信息。不如让我们快速的认识一下它们吧！

Warning

console.warn() 的效果和 console.log() 一样，但是它会有类似警告的样式效果。在大多数的浏览器当中，它显示为黄色的文字并且提示一个警告符号 ⚠。同时，在默认情况下，console.warning() 也会打印执行路径，这样可以快速地找到警告的来源。

console.warn("This is a warning!");

Error

与 console.warn() 类似，console.error() 方法也会打印带有执行路径的消息，消息的样式也是特殊的。它通常是红色的，并且添加了错误图标❌。这样可以清楚地通知用户这里有某些可能错误的代码。这里值得注意的是，console.error() 方法只是打印一个控制台消息，它是没有任何附加效果的，比如停止代码的执行（所以这里你可以抛出一个错误）。这是一个简单的说明，因为许多初学者可能会对这种特性感到有些困扰。

console.error("This is an error!");

Info & debug

还有两种方法可用于向日志中打印一些消息。接下来我们要介绍的是 console.info() 和 console.debug() 。它们的打印结果并不总是具有独特的样式 —— 在某些浏览器中它只是一个图标。其实，这些以及之前的方法是为了便于将你的某些操作按照不同的类别打印在控制台中。在不同的浏览器中，开发工具用户界面为你提供了要显示的特定类别日志的选项，例如：错误、调试消息或普通信息。

console.info("This is very informative!");
console.debug("Debugging a bug!");

Assert

甚至还有一个特殊的 Console 方法，它提供了在条件判断下（断言）执行不同打印效果的快捷方式。它是 console.assert() 。就像标准的 console.log() 方法一样，它可以使用无数个参数，区别在于第一个必须是一个布尔值断言。如果断言是 true，则没有任何反应，反之，它会将所有传递的参数当成错误消息写入控制台（与 console.error() 方法相同）。

console.assert(true, "This won't be logged!");
console.assert(false, "This will be logged!");

然后，在打印了一些消息之后，你可能希望让你的控制台消息面板看起来更干净一些。没问题！只需使用 console.clear() 方法，即可让所有打印过的旧日志全部消失！这是一个非常有用的功能，它甚至在大多数浏览器的控制台界面中都有自己的按钮（和快捷方式）！👍

console.clear()

计时

Console API 甚至还提供了一组与时序相关的方法⌚。使用它们，你可以对部分代码进行快速的性能测试。这个API很简单，你可以使用 console.time() 方法开始，该方法可以将可选参数作为给定计时器的标签或标识。相关的计时器就在调用此方法时启动。然后，你可以使用 console.timeLog() 和 console.timeEnd() 方法（带有可选的标识参数）来记录你的时间（以毫秒为单位）或者结束相应的计时器。

console.time();
// code snippet 1
console.timeLog(); // default: [time] ms
// code snippet 2
console.timeEnd(); // default: [time] ms
1234

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

计数

如果你有打印了许多的日志，但你不知道给定部分代码执行了多少次？这里也有一个 API —— console.count() 方法它最基本的功能就是计算它被调用的次数。当然，你同样可以传递一个可选的参数，为给定计数器提供标签（默认为 default）。你可以使用 console.countReset() 方法重置所选的计数器。

console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.countReset();
console.count(); // default: 1

表格

我认为这是 Console API 最被低估的功能之一（超出之前提到的 CSS 样式）。当在调试和打印二维对象和数组时，向控制台输出真实的可排序表格的能力是非常有用的。对的！实际上可以在控制台中显示一个表格。你只需使用 console.table() 并传递一个参数这么简单（是对象或数组，如果是原始值通常只是打印普通的日志），尝试下面的代码片段即可看到效果。

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

Console ASCII art

如果没有 ASCII art，控制台将不会这样的出众！借助 image-to-ascii 模块（可以在 NPM上找到），你可以轻松地将普通图像转换为 ASCII 对应的模块！🖼 除此之外，此模块还提供了许多可自定义的设置和选项，以创建所需的输出。以下是使用此库的简单示例：

import imageToAscii from "image-to-ascii";

imageToAscii(
"https://d2vqpl3tx84ay5.cloudfront.net/500x/tumblr_lsus01g1ik1qies3uo1_400.png",
{
    colored: false,
}, (err, converted) => {
    console.log(err || converted);
});

使用上面的代码，你可以创建令人惊叹的 JS LOGO，就像现在在控制台中的一样！🤯

借助 CSS 样式，使用一些填充和背景属性，你还可以将完整的图像输出到控制台！例如：你可以查看console.image 模块（也在 NPM上）来使用此功能。但是，我认为 ASCII 更加时尚。💅

现代化的 Logs

如你所见，你的日志和调试的过程已经完全不必是如此的单色！除了简单的 console.log() 之外，还有更多的方法。有了这篇文章的知识，现在你就可以进行选择了！你可以使用传统的 console.log() 和浏览器提供的不同结构的精美格式，或者你也可以使用上述方法为控制台添加一些新鲜感。

我希望你喜欢这篇文章，也希望它可以让你学到新的知识。同时，你可以将这篇文章分享给他人，这样任何人都可以拥有充满色彩的控制台🌈，你也可以通过评论留下你的意见！另外，你可以关注我的 Twitter，也可以给我的 Facebook 发送时事通讯！最后，再次感谢阅读，下一篇文章再见！✌