作为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
                    },
                }
           })] : []
}

设置非常简朴，它简化了事情流程，所以控制台照样很好玩的（但不要滥用它！）