[译] 创意运用 Console API！

• 原文地址：Getting creative with the Console API!
• 原文做者：Areknawo
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：wznonstop
• 校对者：Tammy-Liu, ezioyuan

在 Javascript 中 Console API 和 Debugging 老是密不可分的，其大多经过 console.log() 的方式使用。然而，你知道它不只仅只有这种使用方法吗？你是否也已经对 console.log() 的单一输出方式感到厌倦了呢？你是否也想让你的 log 更出色更优美吗？ 💅 若是你的你的答案是确定的话，跟随我，让咱们一块儿发现 Console API 真正的多姿多彩和趣味性！

Console.log()

不管你是否相信，console.log() 自己仍是有一些你可能不知道的额外功能。固然，她的基础目的 — logging — 是不变的。咱们惟一能作的就是使它更加出色。让咱们尝试一下怎么样？ 😁

String subs

与 console.log() 这一方法紧密相关的惟一事情是你能够将它与所谓的 字符串替换 一同使用。这基本上就是为你提供了使用字符串特定表达式的选项，而后将其替换为提供的参数。它看起来有点像这样：

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

是否是很棒呢？关键是字符串替换表达式有多种变化：

• %o / %O — 用于对象;
• %d / %i — 用于整数;
• %s — 用于字符串;
• %f — 用于浮点数;

可是，看了上面这些，你可能要问，为何要使用这样一个特征？尤为是当你能够简单的传递多个值给 log 的时候，以下所示：

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

此外，对于字符串和数字，你能够只使用 字符串字面值！那么，有什么问题呢？首先，我将讲一下当你作一些不错的 console log 时，你只须要一些不错的字符串，log subs 能够容许你轻松作到这一点。至于上文所讲的字符串替换 — 你必须认同的是 — 你须要睁大眼睛看看这些空间。🛸 使用 subs，它更方便。至于字符串字面值，他们并无像这些 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 指令的普遍应用。正如你所见到的那样，样式应用于处在该编译指令 后面 的全部内容，除非你使用其余的编译指令，而这是咱们正要作的。若是你使用普通的无样式的 log 格式，你将须要传递一个空字符串。不言而喻，这个提供给 %c 编译指令和子字符串的值须要按照预期的顺序一个一个地提交给下一步的参数。 😉

Grouping & tracing

咱们已经在 log 中引入了 CSS，这仅仅只是一个开始，那么 Console API 还有哪些秘密呢？

Grouping

加入过多的 console log 并非很健康，它可能致使更糟糕的可读性，从而出现无心义的 log 的情形。然而适当地创建一些 结构 老是好的。你能够经过使用 [console.group()](https://developer.mozilla.org/en-US/docs/Web/API/Console/group) 的方法精准地实现。经过使用该方法，你能够在 console group 中建立深层次的、可折叠的结构，这容许你隐藏并组织你的 log。若是你但愿在默认状况下将 log group 折叠，还有一个方法是使用 [console.groupCollapsed()](https://developer.mozilla.org/en-US/docs/Web/API/Console/groupCollapsed)。固然，console group 能够根据你的须要进行嵌套（就像你想的那样）。你还能够经过向其传递参数列表来使得你的 log group 具备类 header-log（就像使用 console.log()）。在调用 log group 方法后完成，每一个控制台调用都将在建立的组中找到它的位置。要退出的话，须要使用一个特殊的方法叫作 [console.groupEnd()](https://developer.mozilla.org/en-US/docs/Web/API/Console/groupEnd)。很简单，对吗？😁

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

我想你已经注意到，你只需将全部提供的代码段中的代码 复制并粘贴 到你的控制台，而后以你想要的方式使用它们！

Tracing

另一个关于 Console API 的有用的信息是获取当前调用的路径（执行路径/堆栈跟踪）。你知道吗，代码列表经过放置了被执行的连接（例如函数连接）去获取当前的调用 [console.trace()](https://developer.mozilla.org/en-US/docs/Web/API/Console/trace)，这也正式是咱们所谈论的方法。不管是检测反作用仍是检查代码流，这些信息都很是有用。只需将下面的代码放到你的代码中，你就明白我说的意思啦。

console.trace("Logging the way down here!");
复制代码

Console.XXX

你可能已经了解了一些关于 Console API 的不一样方法。我将要讲的这些可以给你的 logs 增添一些 额外的信息。让咱们快速的归纳一下它们，好吗？

Warning

[console.warn()](https://developer.mozilla.org/en-US/docs/Web/API/Console/warn) 这一方法操做起来就像 console.log（就像大多数这些 logging 方法同样）。可是，它还具备 相似警告的样式。⚠ 在大多数浏览器中，它应该是 黄色 的而且在有一个警告符号（出于天然因素）。默认状况下，对此方法的调用也会返回跟踪，所以你能够快速找到警告（以及可能的错误）的来源。

console.warn("This is a warning!");
复制代码

Error

[console.error()](https://developer.mozilla.org/en-US/docs/Web/API/Console/error)这一方法与 console.warn() 输出具备堆栈跟踪的消息相似，具备特殊的样式。它一般是 红色 的，添加了错误图标。❌ 它清楚地通知用户某些事情是不对的。一个重要的知识点是 .error（）这个方法输出的只是一个没有任何附加选项的控制台消息，相似于中止代码执行（为此你须要抛出一个错误）。它 只是一个简单的说明，由于许多新使用者可能会对这种操做感到有些不肯定性。

console.error("This is an error!");
复制代码

Info & debug

还有两种方法可用于向 logs 添加一些指令：[console.info()](https://developer.mozilla.org/en-US/docs/Web/API/Console/info) 和 [console.debug()](https://developer.mozilla.org/en-US/docs/Web/API/Console/debug)。 🐞 运用这两种方式输出的内容并不老是具备独特的风格，在某些浏览器中它只是一个信息图标。这些和上文说起的其余方法都容许你在你的控制台消息中应用某一特定的类别。在不一样的浏览器中（例如基于 Chromium 的浏览器中），dev-tools UI 为你提供了选项，能够选择显示的特定类别的 log，例如错误，调试消息或信息。这只是一个组织功能！

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

Assert

还有一个特别的 Console API 方法，它为你在任何条件下进行 log（断言）提供了捷径。它就是 [console.assert()](https://developer.mozilla.org/en-US/docs/Web/API/Console/assert)。就像标准的 console.log() 方法同样，它能够采用无数个参数，不一样的是它的第一个参数须要是布尔值。若是它解析为 true，则断言不会被 log，不然，它会将错误和传入的参数在控制台中 log 出来（与 .error（）方法相同）。

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

并且，在使用大量的 log 方法以后，你可能但愿让你的控制台消息板看起来更整洁一些。没问题！只需使用 [console.clear()](https://developer.mozilla.org/en-US/docs/Web/API/Console/clear) 这一方法，便可看到全部以前 log 的信息消失！这是一个很是有用的功能，它甚至在大多数浏览器的控制台界面中都有本身的按钮（和快捷方式）！

Timing

Console API 甚至提供了一组与定时器相关的功能。⌚ 在他们的帮助下，你能够对部分代码快速地进行性能测试。正如我以前所说，这个 API 很简单。你可使用这一方法 [console.time()](https://developer.mozilla.org/en-US/docs/Web/API/Console/time)，将可选参数做为标签或者 id 赋给定时器。当你进行调用的时候定时器便启动了。而后你可使用 [console.timeLog()](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeLog) 和 [console.timeEnd()](https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd) 这两种方法（带有可选的标签参数）来 log 你的时间（以毫秒为单位）以及结束定时器。

console.time();
// code snippet 1
console.timeLog(); // default: [time] ms
// code snippet 2
console.timeEnd(); // default: [time] ms
复制代码

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

Counting

若是你有不少的 log，而你不知道这部分被执行的代码出现了多少次 log，你已经猜到了！接下来这个 API 能够解决这个问题！[console.count()](https://developer.mozilla.org/en-US/docs/Web/API/Console/count) 这一方法多是最基础的东西，它能够计算被调用的次数。固然，你能够传递一个可选参数做为计数器的标签（设定默认值）。稍后，你可使用 [console.countReset()](https://developer.mozilla.org/en-US/docs/Web/API/Console/countReset) 这一方法重置所选计数器。

console.count(); // default: 1
console.count(); // default: 2
console.count(); // default: 3
console.countReset();
console.count(); // default: 1
复制代码

就我的而言，我没有看到不少对这个特殊功能的运用，但这样的方法存在老是好的。也许只是个人一己之见...

Tables

我认为这是 Console API 最被低估的功能之一（超过以前提到的 CSS 样式）。👏 当调试和检查平面或二维对象和数组时，向控制台输出真实的、可排序的表格这一能力是很是有用的。是的，你真的能够在控制台中显示一个表格。它只需使用带有一个参数的简单调用 [console.table()](https://developer.mozilla.org/en-US/docs/Web/API/Console/table)，该参数极可能是对象或数组（原始值一般只是正常的 log，超过 2 维结构将被截断为较小的对应物。只需试一下以下的代码来来看一下我想表达的意思！

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

Console ASCII art

若是没有 ASCII art，console 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 徽标，就像你如今在控制台中建立的徽标同样！ 🤯

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

Modern logs

如你所见，你的 logs 和调试过程总体上没必要如此单调！除了简单的 console.log() 以外，还有更多的好方法。有了这篇文章中的知识，选择权如今就在你的手里！你可使用传统的 console.log() 这一方法和你的浏览器提供的各类精美款样式的结构，或者你可使用上文描述的技巧为你的控制台增添一些新意。浏览器提供的不一样结构的传统和精美格式，或者你可使用上述技术为控制台添加一些新鲜感。不管如何，即便你正在和讨厌的 bug 🐞 斗争，你也要找到其中的乐趣！

我但愿你喜欢这篇文章，它可让你学到新东西。和往常同样，能够考虑与他人分享，让每一个人均可以让他们的控制台充满色彩 🌈 ，并经过反馈或评论将你的意见留在下面！此外，请关注个人 Twitter 和 Facebook 上，并注册 newsletter（即将登场）！再次，感谢阅读，但愿在下一篇文章中依旧看到你的身影！✌

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。