[译] 创造性地使用 Console！

• 原文：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 发送时事通信！最后，再次感谢阅读，下一篇文章再见！✌