前言

作为一个Web前端开发者，你非常清楚知道调试代码的重要性。我们经常使用外部库进行日志记录，并在某些情况下对其进行格式化，以方便我们查看数据，但我们的浏览器的控制台比我们想象的要强大得多。

当我们谈到console，最先先到的是console.log，对吗?(我用的最多也是这个，第一反应也是这个，哈哈哈哈哈)，但是它还有很多方法，超出我们的想象。现在我们将看到如何充分利用控制台，我会给一些示例，让这些方法更具可读性。

什么是console？

JavaScript控制台是现代浏览器中的一种内置功能，类似shell图形化界面的开发者工具，它允许开发者：

• 查看网页上发生的错误和警告的日志。
• 使用JavaScript命令与网页进行交互。
• 调试应用程序并在浏览器中直接查看DOM元素。
• 检查和分析网络情况。

基本上，它使你能够在浏览器中编写、管理和监视JavaScript.

Console.log, Console.error, Console.warn, Console.info

这些可能是所有人使用最多的方法。你可以将多个参数传递给这些方法，每个参数都以空格分隔的字符串进行计算和连接，但对于对象或数组，你可以在其属性之间进行一些操作。

Console.group

此方法允许你将一系列的console.log(也包括错误信息等)在一个组下可以被折叠。这个语法也非常的简单：只需输入我们想在console.group()之前分组的所有console.log(或者使用console.groupCollapsed()如果我们希望在控制台显示的时候默认情况下关闭),然后在最后添加一个console.groupEnd()以关闭组。

结果如下：

Console.table

在console.log内显示JSON或非常大的JSON数组是一种可怕的体验。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(或任何其它库)在我们生成异常时向我们显示的内容。

删除所有的Consoles

使用consoles往往要迫使我们清除它们。在我使用的是Webpack,此工具允许您使用uglifyjs-webpack-plugin删除生产版本中不想保留的consoles

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

配置非常简单，而且还简化来我们的工作。哈哈哈哈哈。

参考链接
       How you can improve your workflow using the JavaScript console by Riccardo Canella

最后更新于 2018-06-15 06:07:22 并被添加「JavaScript」标签，已有 1372 位童鞋阅读过。

相关文章

• Learn these neat JavaScript tricks