使用控制台 API 发挥创意！

控制台.log()

分组和追踪

控制台.XXX

定时

计数

表格

控制台 ASCII 艺术

现代日志

这篇文章取自我的博客，所以一定要查看它以获取更多最新内容😉

JavaScript 中的调试一直与Console API密不可分，而 Console API 在大多数情况下仅通过 来使用console.log()。但是，你知道它不必如此吗？console.log()它千篇一律的输出方式是不是已经让你感到厌烦了？你想让你的日志变得更好、更漂亮吗？💅 如果是的话，那就跟我来，我们将探索 Console API 的丰富多彩和趣味性！

控制台.log()

信不信由你，但console.log()它本身有一些你可能不知道的附加功能。当然，它的基本用途——日志记录——保持不变。我们唯一能做的就是让它看起来更漂亮！我们试试看，好吗？😁

字符串替换

与方法紧密相关的唯一功能console.log()是，你可以将其与所谓的字符串替换一起使用。这基本上为你提供了一种选项，让你可以在字符串中使用特定的表达式，这些表达式稍后将被提供的参数替换。它看起来有点像这样：

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

不错吧？关键在于字符串替换表达式有多种变体：

• %o / %O – 用于对象；
• %d / %i - 表示整数；
• %s——用于字符串；
• %f——表示浮点数；

但是，话虽如此，你可能想知道为什么还要使用这样的功能？尤其是当你可以轻松地将多个值传递给日志时，就像这样：

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

另外，对于字符串和数字，你可以直接使用字符串字面量！那么，这到底是怎么回事呢？首先，我想说，在进行一些漂亮的控制台日志记录时，你只需要一些漂亮的字符串，而字符串替换功能可以让你轻松地做到这一点！至于上面的替代方案——你必须同意——你需要留意所有这些空格。🛸 使用替换功能，它更方便。至于字符串字面量，它们的存在时间不如这些替换功能长（惊喜！🤯）并且……它们不能为对象提供相同的、漂亮的格式。但是，是的，只要你只使用数字和字符串，你可能更喜欢不同的方法。

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 指令以及其他字符串子指令的值需要按照预期的顺序逐一提交，作为后续参数。😉

分组和追踪

我们才刚刚开始，就已经将 CSS 引入到日志中了——哇！Console API 还有什么秘密？

分组

进行过多的控制台日志记录实际上并不健康 - 它会导致可读性下降，从而......产生毫无意义的日志。始终保持一定的结构总是好的。您可以使用 来实现这一点console.group()。通过使用该方法，您可以在控制台中创建深度可折叠的结构 -组console.groupCollapsed()！这不仅允许您隐藏，还可以组织您的日志。如果您希望您的组默认折叠，还有一个方法。当然，可以根据需要嵌套任意数量的组（根据常识）。您还可以通过向其传递一个参数列表（就像使用 一样），使您的组具有看似标题日志的内容console.log()。调用 group 方法后完成的每个控制台调用都会在创建的组中找到它的位置。要退出它，您必须使用一种特殊的console.groupEnd()方法。很简单，对吧？😁

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

我想您已经注意到，您只需将所有提供的片段中的代码复制并粘贴到您的控制台，然后按照您想要的方式使用它们！

追踪

通过控制台 API 可以获得的另一个有用信息是指向当前调用的路径（执行路径/堆栈跟踪）。您知道，这是一个代码内位置的列表，其中包含指向当前调用的执行链接（例如函数链）console.trace()，因为这就是我们正在讨论的方法。无论是用于检测副作用还是检查代码流程，这些信息都非常有用。只需将下面的代码片段放入您的代码中，即可了解我在说什么。

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

控制台.XXX

你可能已经了解了 Console API 的一些不同方法。我说的是那些可以向日志中添加额外信息的方法。不过，我们还是先简单了解一下它们吧，好吗？

警告

该console.warn()方法的行为与 console.log 类似（大多数日志记录方法也是如此），但除此之外，它还具有自己的类似警告的样式。⚠ 在大多数浏览器中，它应该是黄色的，并在某处显示警告符号（出于自然原因）。调用此方法还会默认返回跟踪信息，以便您可以快速找到警告（以及可能的错误）的来源。

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

错误

该console.error()方法类似于console.warn()输出带有堆栈跟踪的消息，但样式经过特殊设计。它通常为红色，并带有错误图标。❌ 它清楚地通知用户某些操作不正确。这里需要注意的是，.error() 方法只是一个控制台消息，没有任何其他选项，例如停止代码执行（要停止代码执行，您需要抛出错误）。这只是一个简单的说明，因为许多新手可能会对这种行为感到有些不确定。

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

信息和调试

还有两种方法可以用来给日志添加一些顺序。我们讨论的console.info()是 和console.debug()。🐞 这些方法的输出并不总是具有独特的样式——在某些浏览器中，它只是一个信息图标。相反，这些方法以及之前的方法允许您将某些类别应用于控制台消息。在不同的浏览器中（例如，在我基于 Chromium 的浏览器中），dev-tools UI 为您提供了一个选项，可以选择要显示的特定类别的日志，例如错误、调试消息或信息。这只是又一个组织功能！

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

断言

甚至还有一个特定的 Console API 方法，它为你提供了任何条件日志记录（断言）的快捷方式。它被称为console.assert()。与标准console.log()方法一样，它可以接受无限数量的参数，不同之处在于第一个参数必须是布尔值。如果它解析为 true，则断言保持静默；否则，它会将错误（与 .error() 方法相同）以及所有传递的参数记录到控制台。

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

而且，在处理了这么多乱七八糟的事情之后，你可能想让你的控制台消息板看起来更干净一些。没问题！只需使用这个方法，你就能看到所有旧日志都消失了！这个功能非常实用，大多数浏览器的控制台界面上console.clear()甚至都有它自己的按钮（和快捷方式）！👍

定时

Console API 甚至提供了一小组与计时相关的函数。⌚ 借助它们，您可以对部分代码进行快速而粗略的性能测试console.time()。正如我之前所说，这个 API 很简单。您可以从一个方法开始，该方法可以接受一个可选参数作为给定计时器的标签或标识。所提到的计时器会在调用此方法时启动。然后，您可以使用console.timeLog()和console.timeEnd()方法（带有可选的标签参数）来记录时间（以毫秒为单位）并相应地结束相应的计时器。

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

当然，如果您正在进行一些真正的基准测试或性能测试，我建议使用专门为此目的设计的性能 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]]);

控制台 ASCII 艺术

如果没有ASCII 艺术，控制台艺术就大不相同了！借助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 样式、一些 padding 和 background 属性，你还可以将完整的图像输出到控制台！例如，你可以查看console.image模块（NPM上也有提供）来体验此功能。不过，我还是觉得 ASCII 更……时尚一些。💅

现代日志

如您所见，您的日志和整个调试过程不必如此单调！除了简单之外，还有很多其他好方法console.log()。有了本文的知识，现在您可以自行选择！您可以继续使用console.log()浏览器提供的传统且相当精细的不同结构格式，也可以使用上面介绍的技术为控制台增添一些新鲜感。总之，继续享受乐趣吧……即使您正在与一个非常棘手的 bug 作斗争！🐞

希望你喜欢这篇文章，并能从中学到一些新东西。和往常一样，不妨分享给大家，让每个人都能拥有色彩缤纷的主机🌈。欢迎在下方留言或评论区留下你的看法！也欢迎关注我的推特、脸书页面，以及我的个人博客。再次感谢你的阅读，我们下期再见！✌