如何使用JavaScript控制台改善工作流程 (How you can improve your workflow using the JavaScript console)

As a web developer, you know very well the need to debug your code. We often use external libraries for logs, and to format and/or display them in some cases, but the console of our browsers is much more powerful than we think.

作为Web开发人员，您非常了解调试代码的需求。我们经常使用外部库来记录日志，并在某些情况下格式化和/或显示它们，但是浏览器的控制台功能比我们想象的要强大得多。

When we think about the console, the first thing that comes to mind and the console.log, right? But there are many more methods than those we imagine. Now we will see how to make the most of using the console, and I’ll give you some tips to make them these methods more readable

当我们想到控制台时，首先想到的是console.log ，对吧？但是有比我们想象的更多的方法。现在，我们将了解如何充分利用控制台，并且我将为您提供一些技巧，以使这些方法更具可读性

什么是控制台？ (What is the Console?)

The JavaScript console is a built-in feature in modern browsers that comes with out-of-the-box development tools in a shell-like interface. It allows a developer to:

JavaScript控制台是现代浏览器中的内置功能，它在类似Shell的界面中带有开箱即用的开发工具。它允许开发人员执行以下操作：

View a log of errors and warnings that occur on a web page.
查看网页上出现的错误和警告日志。
Interact with the web page using JavaScript commands.
使用JavaScript命令与网页进行交互。
Debug applications and traverse the DOM directly in the browser.
调试应用程序并直接在浏览器中遍历DOM。
Inspect and analyze network activity
检查并分析网络活动

Basically, it empowers you to write, manage, and monitor JavaScript right within your browser.

基本上，它使您可以直接在浏览器中编写，管理和监视JavaScript。

Console.log，Console.error，Console.warn和Console.info (Console.log, Console.error, Console.warn and Console.info)

These are probably the most used methods of all. You can pass more than one parameter to these methods. Each parameter is evaluated and concatenated in a string delimited by the space, but in case of objects or arrays you can navigate between their properties.

这些可能是最常用的方法。您可以将多个参数传递给这些方法。每个参数都以空格分隔的字符串进行评估和连接，但是对于对象或数组，您可以在其属性之间导航。

Console.group (Console.group)

This method allows you to group a series of console.logs (but also error info, and so on) under a group that can be collapsed. The syntax is really very simple: just enter all the console.log we want to group before a console.group() (or console.groupCollapsed() if we want it to be closed by default). Then add a console.groupEnd() at the end to close the group.

通过此方法，您可以将一系列console.logs(还包括错误信息，等等)归为一个可折叠的组。语法真的很简单：只需输入所有console.log一个之前我们要组console.group()或console.groupCollapsed()如果我们希望它在默认情况下关闭)。然后在末尾添加console.groupEnd()以关闭组。

The results will look like this:

结果将如下所示：

控制台表 (Console.table)

Since I discovered the console.table my life has changed. Displaying JSON or very large JSON arrays inside a console.log is a terrifying experience. The console.table allows us to visualize these structures inside a beautiful table where we can name the columns and pass them as parameters.

自从发现console.table我的生活发生了变化。在console.log显示JSON或非常大的JSON数组是一种令人恐惧的体验。 console.table允许我们在漂亮的表中可视化这些结构，我们可以在其中命名列并将它们作为参数传递。

The result is wonderful and very useful in debugging:

结果是极好的，并且在调试中非常有用：

Console.count，Console.time和Console.timeEnd (Console.count, Console.time and Console.timeEnd)

These three methods are the Swiss army knife for every developer who needs to debug. The console.count counts and outputs the number of times that count() has been invoked on the same line and with the same label. The console.time starts a timer with a name specified as an input parameter, and can run up to 10,000 simultaneous timers on a given page. Once initiated, we use a call to console.timeEnd to stop the timer and print the elapsed time to the Console.

对于需要调试的每个开发人员，这三种方法都是瑞士军刀。 console.count计数并输出在同一行上使用相同标签调用count()的次数。 console.time以指定为输入参数的名称启动计时器，并且在给定页面上最多可以同时运行10,000个计时器。启动后，我们将使用对console.timeEnd的调用来停止计时器并将经过的时间打印到控制台。

The output will look like this:

输出将如下所示：

Console.trace和Console.assert (Console.trace and Console.assert)

These methods simply print a stack trace from the point where it was called. Imagine you are creating a JS library and want to inform the user where the error was generated. In that case, these methods can be very useful. The console.assert is like the console.trace but will print only if the condition passed didn’t pass.

这些方法只是从调用点打印堆栈跟踪。假设您正在创建一个JS库，并且想通知用户错误发生的位置。在这种情况下，这些方法可能非常有用。 console.assert类似于console.trace但仅在传递的条件未通过时才会打印。

As we can see, the output is exactly what React (or any other library) would show us when we generate an exception.

如我们所见，输出正是生成异常时React(或任何其他库)向我们显示的内容。

删除所有控制台？ (Delete all the Consoles ?)

Using consoles often forces us to eliminate them. Or sometimes we forget about the production build (and only notice them by mistake days and days later). Of course, I do not advise anyone to abuse consoles where they are not needed (the console in the change input handle can be deleted after you see that it works). You should leave error logs or trace logs in development mode to help you debug. I use Webpack a lot, both at work and in my own projects. This tool allows you to delete all the consoles that you do not want to remain (by type) from the production build using the uglifyjs-webpack-plugin ?

使用控制台通常会迫使我们消除它们。有时我们会忘记生产版本(并且几天后才错误地注意到它们)。当然，我不建议任何人滥用不需要控制台的控制台(在看到更改输入句柄后可以删除控制台)。您应该将错误日志或跟踪日志留在开发模式下，以帮助您调试。无论是在工作中还是在我自己的项目中，我都经常使用Webpack。使用此工具，您可以使用uglifyjs-webpack-plugin从生产版本中删除所有不想保留的控制台(按类型)。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')var debug = process.env.NODE_ENV !== "production";.....optimization: {        minimizer: !debug ? [            new UglifyJsPlugin({                // Compression specific options                uglifyOptions: {                    // Eliminate comments                    comments: false,                    compress: {                       // remove warnings                       warnings: false,                       // Drop console statements                       drop_console: true                    },                }           })] : []}

The configuration is really trivial and it simplifies the work, so have fun with the console (but do not abuse it!)

配置确实很简单，并且简化了工作，因此可以在控制台上玩乐(但不要滥用它！)

If you liked the article please clap and follow me :)
如果您喜欢这篇文章，请鼓掌并关注我:)

Thx and stay tuned ?
谢谢，敬请期待？

Follow my last news and tips on Facebook
在Facebook上关注我的最新消息和提示