簡評：只知道 console.log ？是時候提升一下對 console 的認(rèn)知了。

JavaScript console 是現(xiàn)代瀏覽器的一種內(nèi)置功能，它允許開發(fā)者：

• 查看網(wǎng)頁上的錯誤和警告日志。
• 使用 JavaScript 命令與網(wǎng)頁進(jìn)行交互。
• 調(diào)試應(yīng)用程序并直接在瀏覽器中遍歷 DOM。
• 檢查和分析網(wǎng)絡(luò)活動。

基本上，你可以使用它來管理和監(jiān)控 JavaScript 在瀏覽器中正確運(yùn)行。

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

log( ) / error( ) / warn( ) 和 info( ) 是最常用的方法，你可以將多個參數(shù)傳遞給這些方法（輸出會使用空格分隔開來）。

Console.group

這個方法允許你對一些列 console.logs （error 和 info 同理）分組在一個可以折疊的組中,

用法非常簡單，只需要將 console.log 放置 console.group 和 console.groupEnd 中即可。

輸出如下：

Console.table
使用 console.log 來顯示一個 JSON 或者一個非常大的 JSON 數(shù)組的時候不便于閱讀，這時候可以使用 console.table 來顯示效果會更好。

輸出結(jié)果：

Console.count, Console.time 和 Console.timeEnd
console.time 和 console.timeEnd 可以方便的查看代碼段耗費(fèi)的時間。console.count 可以用于記錄代碼執(zhí)行的次數(shù)：

輸出如下：

Console.trace 和 Console.assert
這個方法會在被調(diào)用的地方打印堆棧信息，例如：你正在創(chuàng)建一個 JS 庫，并且想告訴用戶錯誤產(chǎn)生的地方。

結(jié)果輸出如下：

生產(chǎn)環(huán)境中刪除所有 Consoles

我們往往在開發(fā)環(huán)境才需要使用 console，并希望在生產(chǎn)環(huán)境去除這部分內(nèi)容。這時候可以使用 uglifyjs-webpack-plugin 刪除生產(chǎn)環(huán)境不想不留的 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
推薦閱讀：Python 中的 10 個常見安全漏洞，以及如何避免