JavaScript Debug 之 Console

简评：只知道 console.log ？是时候提高一下对 console 的认知了。

JavaScript console 是现代浏览器的一种内置功能，它容许开发者：

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

基本上，你能够使用它来管理和监控 JavaScript 在浏览器中正确运行。

Console.log, Console.error, Console.warn 和 http://Console.info

log( ) / error( ) / warn( ) 和 info( ) 是最经常使用的方法，你能够将多个参数传递给这些方法（输出会使用空格分隔开来）。

Console.group

这个方法容许你对一些列 console.logs （error 和 info 同理）分组在一个能够折叠的组中,

用法很是简单，只须要将 console.log 放置 console.group 和 console.groupEnd 中便可。

输出以下：

Console.table

使用 console.log 来显示一个 JSON 或者一个很是大的 JSON 数组的时候不便于阅读，这时候能够使用 console.table 来显示效果会更好。

输出结果：

Console.count, Console.time 和 Console.timeEnd

console.time 和 console.timeEnd 能够方便的查看代码段耗费的时间。console.count 能够用于记录代码执行的次数：

输出以下：

Console.trace 和 Console.assert

这个方法会在被调用的地方打印堆栈信息，例如：你正在建立一个 JS 库，而且想告诉用户错误产生的地方。

结果输出以下：

生产环境中删除全部 Consoles

咱们每每在开发环境才须要使用 console，并但愿在生产环境去除这部份内容。这时候能够使用 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