简评:只知道 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
推荐阅读:Python 中的 10 个常见安全漏洞,以及如何避免