如何使用JavaScript控制台改进工做流程

做为Web开发人员，颇有必要了解如何调试代码。后台开发咱们常用外部库来记录日志，并在某些状况下格式化显示日志，前端咱们会使用断点和控制台，可是咱们浏览器的控制台比咱们想象的要强大得多。

当咱们考虑控制台时，首先想到的是console.log，对吧？可是它比咱们想像中使用的方法多得多。如今咱们来看一下如何充分利用控制台，我将为您提供一些技巧，使这些方法更具可读性

什么是控制台？

JavaScript控制台是现代浏览器中的内置功能，它在相似shell的界面中带有开箱即用的开发工具。它容许开发人员：

• 查看网页上发生的错误和警告的日志。
• 使用JavaScript命令与网页交互。
• 调试应用程序并直接在浏览器中遍历DOM。
• 检查和分析网络活动 基本上，它使您可以在浏览器中编写，管理和监控JavaScript。

Console.log，Console.error，Console.warn和Console.info 这些多是最经常使用的方法。您能够将多个参数传递给这些方法。每一个参数都在由空格分隔的字符串中进行计算和链接，可是对于对象或数组，您能够在它们的属性之间导航。

Console.group

在检查代码逻辑和流程时咱们可能会使用不少的console.log()来检测，可是你会发现控制台打印出来的很是多。此方法容许您在可折叠的组下对一系列console.log（以及错误信息等）进行分组。语法很是简单：只需console.log在以前输入咱们想要分组的全部内容console.group()（或者console.groupCollapsed()若是咱们但愿它默认关闭）。而后console.groupEnd()在末尾添加一个关闭组。

Console.table

自从我发现console.table个人生活都发生了改变。在一个内部显示JSON或很是大的JSON数组console.log是一种很差的体验。这console.table容许咱们在一个漂亮的表中可视化这些结构，咱们能够在其中命名列并将它们做为参数传递。

很是好，在调试中很是有用：

Console.count，Console.time和Console.timeEnd 对于须要调试的每一个开发人员来讲，这三种方法都是瑞士军刀。该console.count计数和输出是的次数count()已被调用在同一行，并用相同的标签。该console.time开始用指定为输入参数的名称定时器，能够运行多达10,000个特定网页上同时定时器。启动后，咱们使用调用来console.timeEnd中止计时器并将通过的时间打印到控制台。

输出将以下所示：

Console.trace和Console.assert

这些方法只是从调用它的代码位置，打印堆栈跟踪。想象一下，您正在建立一个JS库，并但愿通知用户生成错误的位置。在这种状况下，这些方法很是有用。该console.assert是喜欢console.trace，可是只打印条件不符合的。

正如咱们所看到的，输出正是React（或任何其余库）在生成异常时向咱们展现的内容。

删除全部控制台🙀

使用控制台一般会迫使咱们消除它们。或者有时候咱们会忘记生产构建（而且只会在几天和几天以后错误地注意它们）。固然，我不建议任何人滥用不须要它们的控制台（更改输入句柄中的控制台能够在看到它工做后删除）。您应该在开发模式下保留错误日志或跟踪日志以帮助您进行调试。我在工做和我本身的项目中都常用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
                    },
                }
           })] : []
}
复制代码

配置很是简单，它简化了工做流程，因此控制台仍是很好玩的（但不要滥用它！）