创造性的使用 Console API！

Open manooog opened this issue 5 years ago • 0 comments

原文地址: https://areknawo.com/getting-creative-with-the-console-api/

原文作者: https://areknawo.com/author/areknawo/

创造性的使用 Console API！

Javascript 中进行调试总是与 Console API 有密不可分的关系。但是往往我们只用过 console.log()。那么，你知道我们还可以用其他用法吗？使用console.log()的时候，它的大段式输出是否曾困扰过你？你想让你的调试信息更美观吗？💅如果有这个想法的话，接着往下看，我们将发现 Console API 会有多美观和有趣！

Console.log()

别不信，console.log() 自身就已经有了一些你不知道的附加功能。当然，它基础的功能 - 打印日志 - 不会受到影响。我们唯一能做的事情就是将它输出的日志变漂亮。让我们尝试一下，好吗？😁

字符串替换

唯一一件和 console.log() 方法密不可分的事情是你可以使用一个被称为 字符串替换 的方式来使用它。使用这种方式，你可以先在字符串中使用一个特殊的表达式，随后使用自定义的参数替换它。它看起来就像下面这样：

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

12

是不是很棒？问题是这种字符串的替换方式有多种：

%o / %O - 使用对象来替换;
%d / %i - 使用整数来替换;
%s - 使用字符串来替换;
%f - 使用浮点数来替换;

但是，即便这样，你可能还是会问，到底啥时候需要用到这个特性呢？特别是就像下面这样，你可以简单的传递多个参数给 log 函数：

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

123

同时，对于字符串和数字来说，你可以就使用 模版字符串!那么，到底啥时候可以用到这个特性呢？首先，我想说的是，当我们想打印一些漂亮的日志的时候，可能仅仅需要一些漂亮的字符串，字符串替换可以让你简单的实现这一需求。作为替代方案的上面的例子中，你必须认识到，你需要时刻小心翼翼的处理那些空格。但使用字符串替换的话，就方便多了。

As for string literals tho, they haven't been around as long as these subs (surprise! 🤯) and... they don't provide the same, nice formatting for objects. But yeah, as long as you're working with numbers and strings only, you may prefer a different approach.

CSS

还有一种我们之前没有学过的类似于字符串替换的命令。这个命令是 %c，它允许你为打印的消息加上样式。让我们来看一下如何使用：

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

123

以上的例子被广泛的使用。如你所见，紧跟在指令后的所有东西都被加上了样式。跳出上一个样式的方式是使用另一个指令，就像我们在这里用的一样。如果你想使用普通的、没有样式的日志格式，你需要传递一个空的字符串。还有一点显而易见的是，传递给指令的参数总是按照顺序一条一条的生效的。

分组 & 追踪

我们仅仅只是开始，上面已经介绍了使用带样式的日志。哇，Console API 还有哪些秘密呢？

分组

使用太多的日志可能不是非常好，这有可能导致不易读的和无意义的日志。有结构总是好的。你可以使用console.group()对他们进行合并。使用这个方法，你可以在控制台中创造一些深层次的、可折叠的结构 ---- 分组。这个方式不仅可以将日志隐藏，也可以将日志进行有组织的划分。还有一个console.groupCollapsed()方法，在你需要将分组进行默认折叠的时候可以使用它。当然，分组是可以嵌套的。

You can also make your group have what-seems-like header-log, by passing a list of arguments to it (just like with console.log()). Every console call done after invoking the group method, will find its place inside created group. To exit it, you have to use a special console.groupEnd() method. Simple, right? 😁

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

1234567

我想你已经发现了，你可以复制粘贴上面的代码片段到你的控制台中以你想要的方式进行测试。

追踪

另一个有用的信息是，你可以通过 Console API 得到当前调用的过程（执行过程/堆栈记录）。正如你所知道的，就是一个代码执行（例如：函数执行链）到当前console.trace()调用的列表，这就是我们所介绍的函数。这个信息在我们监测副作用或者检查代码的工作流程的时候会很有用。把下面的代码片段放到你的代码中，你就知道我所讲的东西了。

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

1

Console.XXX

你可能早已知道一些 Console API 的其他用法。我所讲的是这些可以往日志上添加一些附加信息的方法。在这之前，让我们先简单过一下它们的用法，好吗？

Warning

console.warn() 方法的行为和 console.log（就像大多数打日志的方法那样）很像，但是，需要多说一句，它有自己的样式。 ⚠ 在大多数浏览器中，会是黄色同时会有一个警告标记。这个方法执行时的所有调用过程也会被默认返回，因此你可以快速定位出现警告（也可能是bug）的地方。

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

1

Error

console.error()方法，和console.warn()有着类似的调用堆栈的输出，也有着特殊的样式。它通常是红色配合一个表示错误的图标。❌ 它清楚地通知了用户有一些东西可能不那么正常。还有一个重要的事情，.error() 方法仅仅只是一个控制台输出，而没有任何附加的功能，比如说停止代码的执行（要想停止代码的执行，你需要抛出一个错误）。温馨提示，对于许多初学者而言，对于这一行为可能会有一些不确定。

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

1

Info & debug

还有两个方法可用来增加日志的规范性。这两个方法是console.info()和console.debug()。🐞 这两个方法的输出不总是会有特殊的样式 -- 在某些浏览器中可能仅仅只是一个表示信息的图标。不管是这两个方法还是前面说到的方法，都可以让你更加明确的对日志信息进行分类。在不同的浏览器中（例如：我目前使用的基于 Chromiun 内核的这个），调试用的 GUI 工具可以让你选择特定的日志类型进行显示，例如错误、调试或者是消息信息。对于我们来说，多了一种组织信息输出的功能。

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

12

Assert

还有一种特殊的 Console API ，它给你提供了一个打印有条件的日志的捷径。这个方法就是console.assert()。和标准的console.log()方法一样，可以接收无限数量的参数，不同的是，第一个参数必须是布尔值。如果它求值得到true,将不会输出信息，否则将会得到一个错误的日志（就像 .error() 方法一样），日志的内容就是所有余下的参数。

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

12

了解所有上面那些内容之后，你可能有了想把你的控制台信息展示得更简洁一点的欲望。没毛病！只需要使用console.clear()方法就行，随后所有旧的调试信息就都没了。这是个很好的特性，甚至于很多浏览器的调试工具中都内置了这个功能的触发按钮。👍

Timing

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，这是专门为了性能测试而设计的

Counting

在你有很多日志输出以至于你不知道给定的代码被执行了多少次的时候 -- 你可能已经猜到了！也有一个 API 来做这个事情！console.count()方法做了能做的最基础的事情 -- 它会计算它被调用的次数。你可以，理所当然的，传递一个可选的参数为给定的计数器提供一个标签（默认是 default）。你可以随后使用console.countReset()方法重置一个选中的计数器。

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

从我个人的角度来看，我觉得这个特性没有太大用途，但是有这个方法听起来也挺不错的。可能仅仅只有我这么认为吧...

Tables

我认为这是最被低估的 Console API 的特性之一（甚至超过了之前提到的CSS 样式）。👏当你在调试和检查各种类型的对象的时候，输出真实的、有顺序的表格到控制台是一件非常非常有用的事情。没错，你真的能够在控制台中展示一个表格。所有你需要做的事情仅仅是通过调用console.table()同时传递一个参数-比如说对象或者数组（基础数据类型还是以普通的方式进行输出，对象和数组则会以更小的结构打印出来）。试下下面的代码片段你就知道我在说啥了。

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

1

Console ASCII art

说到控制台的艺术，不得不提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);
});

123456789

使用上面的代码，你可以生成令人惊叹的 JS 日志，就像现在出现在你控制台中的这样。

在 CSS 样式的帮助下，就像内间距、背景等等，你也可以输出一个非常完美的图片到你的控制台！比如说，你可以看一下 console.image模块，这个模块也可以在NPM中找到，使用这个模块也能做到这个效果。但是，我觉得 ASCII 会更时尚一点。

Modern logs

正如你说见，你的日志和调试过程可以不用这么单调！有很多比console.log()好得多的方式。使用在这篇文章中学到的知识，剩下的选择就出自你自己了！你可以保持传统的console.log()和浏览器自带的格式化效果，也可以通过上文介绍的内容在你的控制台中增添一些新鲜的东西。总之，怎么开心怎么来吧，即便你正在解决一个难缠的bug!🐞

我希望你喜欢这篇文章，同时也希望能给你带来一些新的知识。请一定要将这篇文章分享给那些想把他们的控制台变得丰富多彩的人，也欢迎在文末留下你的意见和评论！最后，希望大家关注我的推特、Facebook，不妨在newsletter注册一个账号！再次，感谢阅读，希望下篇文章还能看到你！

May 25 '19 07:05 manooog

article article copied to clipboard