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