JavaScript Debug 之 Console

缺乏、安全感 2022-02-28 12:14 184阅读 0赞

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

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

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

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

**Console.log, Console.error, Console.warn 和 [http://Console.info][http_Console.info]**

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

![v2-a586802df9eed22addd5270d6c883227\_hd.jpg][v2-a586802df9eed22addd5270d6c883227_hd.jpg]

**Console.group**

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

用法非常简单，只需要将 console.log 放置 [console.group][] 和 console.groupEnd 中即可。

![v2-0fbb29e3b0abb73ad53ff23b25332ab6\_hd.jpg][v2-0fbb29e3b0abb73ad53ff23b25332ab6_hd.jpg]

输出如下：

![v2-5c4bf3128ac0a6aa0f7631c5c3150b60\_hd.jpg][v2-5c4bf3128ac0a6aa0f7631c5c3150b60_hd.jpg]

Console.table

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

![v2-40dea106b5b6f80eb9a92377d504b232\_hd.jpg][v2-40dea106b5b6f80eb9a92377d504b232_hd.jpg]

输出结果：

![v2-41023631acbc3f532a11a3e093244a62\_hd.jpg][v2-41023631acbc3f532a11a3e093244a62_hd.jpg]

**Console.count, Console.time 和 Console.timeEnd**

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

![v2-53da579733668ba1c77a73dee9a80d1a\_hd.jpg][v2-53da579733668ba1c77a73dee9a80d1a_hd.jpg]

输出如下：

![v2-e8a2e8eaeb11609ef5194c96d2d2efa1\_hd.jpg][v2-e8a2e8eaeb11609ef5194c96d2d2efa1_hd.jpg]

**Console.trace 和 Console.assert**

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

![v2-f68776ae3e33a87a277b6458b264bb49\_hd.jpg][v2-f68776ae3e33a87a277b6458b264bb49_hd.jpg]

结果输出如下：

![v2-f53cc55c6eda6507956dcff31915e723\_hd.jpg][v2-f53cc55c6eda6507956dcff31915e723_hd.jpg]

生产环境中删除所有 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][]

[http_Console.info]: http://Console.info
[v2-a586802df9eed22addd5270d6c883227_hd.jpg]: /images/20220228/c167b967133243d390d465e589f20fac.png
[console.group]: https://ticket.directory
[v2-0fbb29e3b0abb73ad53ff23b25332ab6_hd.jpg]: /images/20220228/2196fcb65955419d9f415ec70ce1d74d.png
[v2-5c4bf3128ac0a6aa0f7631c5c3150b60_hd.jpg]: /images/20220228/ca2b3c9ac2d0473db55263495577b32e.png
[v2-40dea106b5b6f80eb9a92377d504b232_hd.jpg]: /images/20220228/0df5bfeacc8448769a5c4e6b59bb53a1.png
[v2-41023631acbc3f532a11a3e093244a62_hd.jpg]: /images/20220228/dd8fdeaf0d504331aaa574824d48c509.png
[v2-53da579733668ba1c77a73dee9a80d1a_hd.jpg]: /images/20220228/fe46165d13e042048006dc88496ebf5b.png
[v2-e8a2e8eaeb11609ef5194c96d2d2efa1_hd.jpg]: /images/20220228/7b326a2ac31c4550ab74177e46d489ae.png
[v2-f68776ae3e33a87a277b6458b264bb49_hd.jpg]: /images/20220228/8241f9edef0044a9a17f367a63ea750f.png
[v2-f53cc55c6eda6507956dcff31915e723_hd.jpg]: /images/20220228/192527fdf4f34391b1183e3f041e9d01.png
[uglifyjs-webpack-plugin]: https://github.com/webpack-contrib/uglifyjs-webpack-plugin
[How you can improve your workflow using the JavaScript console]: https://medium.freecodecamp.org/how-you-can-improve-your-workflow-using-the-javascript-console-bdd7823a9472