《停止在 JavaScript 中使用简单的 console.log:试试这个办法》（译文）

【关于TalkX】

TalkX是一款基于GPT实现的IDE智能开发插件，专注于编程领域，是开发者在日常编码中提高编码效率及质量的辅助工具，TalkX常用的功能包括但不限于：解释代码、中英翻译、性能检查、安全检查、样式检查、优化并改进、提高可读性、清理代码、生成测试用例等。

TalkX建立了全球加速网络，不需要考虑网络环境，响应速度快，界面效果和交互体验更流畅。并为用户提供了OpenAI的密钥，不需要ApiKey，不需要自备账号，不需要魔法。

TalkX产品支持：JetBrains (包括 IntelliJ IDEA、PyCharm、WebStorm、Android Studio)、HBuilder、VS Code、Goland.

Debugging. Something that programmers try hard to avoid, only to make more bugs in code.

Coding without bugs is something even the best programmers would find hard. Which is why, you should always debug code.

And one of the best ways to debug JavaScript code is the amazing console.log(). Except, there are better ways.

And that is the point of this article. To tell about better ways to interact with the console.

Typing console in a sophisticated IDE gives a variety of auto completions.

调试。这是程序员极力避免的事情，却只会在代码中制造更多的错误。

即使是最优秀的程序员也很难在编码时不出现错误。这就是为什么要经常调试代码的原因。

调试 JavaScript 代码的最佳方法之一就是令人惊叹的 console.log()。除此之外，还有更好的方法。

这就是本文的重点：介绍与控制台进行交互的更好方法。

在复杂的集成开发环境中键入控制台，会出现各种各样的自动补全功能。

Instead of using the normal console.log(), here are some better options.

Using these makes the process of debugging a lot easier and faster.

与使用普通的console.log()相比，这里有一些更好的选择。

使用这些选项可以让调试过程变得更简单、更快捷。

console.warn() and console.error()

When there is a bug that can stop the working of your application, using another console.log to debug it wouldn’t work.

Your console messages would get mixed up. You can’t find the message that your looking for.

But, using console.warn() and console.error() are good ways to overcome this.

当出现可能导致应用程序停止运行的错误时，使用另一个控制台日志来调试是行不通的。

你的控制台消息会被搞混。你找不到要找的信息。

不过，使用 console.warn() 和 console.error() 可以很好地解决这个问题。

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

console.error("This is an error")

Timing operations

Want to see how much time that piece of code took to run?

计时操作

想知道这段代码的运行时间吗？

Use console.time().

First, create a timer and give it a unique name.

首先，创建一个计时器并为其指定一个唯一的名称。

console.time("Loop timer")

Then, run the piece of code.

然后，运行该代码段。

for(i = 0; i < 10000; i++){
    // Some code here
}

Then, call timeEnd().

然后，调用timeEnd()。

console.timeEnd("Loop timer")

Here is all the code.

以下是所有的代码

console.time("Loop timer")
for(i = 0; i < 10000; i++){
    // Some code here
}
console.timeEnd("Loop timer")

This is very useful in CPU intensive applications that would take some time,
like Neural Networks, or HTML Canvas reading.

这对于需要耗费一定时间的 CPU 密集型应用非常有用、如神经网络或 HTML 画布读取。

Tracing how the code got there

追踪代码是如何到达那里的

Want to see how a function was called?

想知道函数是如何被调用的吗？

function trace(){
    console.trace()
}
function randomFunction(){
    trace();
}

Over here, there is a method called randomFunctionthat calls trace, which calls console.trace().

So, when you call randomFunction, you will get an output like.

这里有一个名为 randomFunction的方法，它调用了 trace，后者调用了 console.trace()。

因此，当你调用 randomFunction 时，会得到类似以下的输出结果。

It shows that anonymous (which is the main JavaScript code) called randomFunction, which called trace().

它显示 anonymous（即 JavaScript 的主代码）调用了 randomFunction```，而该函数又调用了 trace()```。

Group console messages

If you group console messages, you can make your console easier to read.

分组控制台信息

如果对控制台信息进行分组，就能让控制台更容易阅读。

console.log("Test1!");

console.group("My message group");

console.log("Test2!");
console.log("Test2!");
console.log("Test2!");

console.groupEnd()

All the Test2 messages come under ‘My message group’.

所有 Test2 消息都位于“我的消息组”下。

Erase the console

If you are following this tutorial, then your console will be pretty full. Let’s erase it.

清除控制台

如果你正在学习本教程，那么你的控制台肯定已经满了。让我们擦除它。

console.clear();

Well, let me show you the console.

好吧，让我向你展示控制台。

Not much to show. Now that we’re clear again, let’s continue.

没什么可展示的。现在我们又清楚了，让我们继续。

Tables

Let’s add tables to visualize data better.

Imagine we have two objects.

表格

让我们添加表格，以便更好地可视化数据。

想象一下，我们有两个对象。

var person1 = {name: "Weirdo", age : "-23", hobby: "singing"}
var person2 = {name: "SomeName", age : "Infinity", hobby: "programming"}

Simply console.logwould make the data look messy.

简单地 ``console.log```会让数据看起来乱七八糟。

A table would be better.

最好能有一张桌子。

console.table({person1, person2})

Never knew JavaScript consoles can look so clean, right?

从来不知道 JavaScript 控制台可以看起来如此简洁，对吧？

CSS in the console?

Yes, you read that right.

You can add CSS to the console.

控制台中的CSS？

是的，你没看错。

你可以在控制台中添加 CSS。

console.log("%c I love JavaScript!", 
  "color: red; background-color: lightblue; border: solid");

Notice the %c sign. That is where the magic lies.

注意%c符号。这就是神奇之处。

Thanks for reading the article so far. This is the 5th article of a series about various JavaScript APIs and Features.

感谢您阅读本文。本文是关于各种 JavaScript API 和功能的系列文章的第 5 篇。

You can find the other articles here:
您可以在这里找到其他文章：
List: JavaScript APIs and Features | Curated by Anirudh Munipalli | Medium

文章：《STOP using simple console.log in JavaScript. Try this instead》

作者：Anirudh Munipalli

日期：2023年7月8号

上述译文仅供参考，原文请查看下面链接，解释权归原作者所有

⚠️：文章翻译如有语法不准确或者内容纰漏，欢迎评论区指正。

【关于TalkX】

TalkX是一款基于GPT实现的IDE智能开发插件，专注于编程领域，是开发者在日常编码中提高编码效率及质量的辅助工具，TalkX常用的功能包括但不限于：解释代码、中英翻译、性能检查、安全检查、样式检查、优化并改进、提高可读性、清理代码、生成测试用例等。

TalkX建立了全球加速网络，不需要考虑网络环境，响应速度快，界面效果和交互体验更流畅。并为用户提供了OpenAI的密钥，不需要ApiKey，不需要自备账号，不需要魔法。

TalkX产品支持：JetBrains (包括 IntelliJ IDEA、PyCharm、WebStorm、Android Studio)、HBuilder、VS Code、Goland.