看到了一篇文章觉得很有意思
原文是How you can improve your workflow using the JavaScript console 作者列举了Console的其他用法，算我孤陋寡闻了，平常Debug时只使用Console.log，看了这篇文章才知道有那么多有意思的方法，下面介绍给大家。
什么是Console
JavaScript console 是现在浏览器的一个特性，它可以为开发者提供
- 在网页上查看错误日志和警告日志
- 使用JS命令与网页交互
- 在浏览器中直接Debug项目访问DOM
- 分析网络活动
基本上在浏览器里它授权你写，管理和监听JavaScript是否正确
Console.log, Console.error, Console.warn and Console.info
这些是最常见的方法，你可以传递多个参数，每个参数都被计算并连接到一个由空格分隔的字符串中，但是objec对象和array数组例外，它们是通过属性进行分隔。
screenshot1
Console.group
这个方法允许你将一系列的console.log进行分组（包括 error info 等），在这个组中可以进行折叠。语法也非常简单，
function doSomthing (parm) {
console.group('group start')
console.log('date print', new Date())
console.log(123)
console.groupEnd()
console.log('out the group')
}
doSomthing()
结果如下：
screenshot2
Console.table
当遇到特别大的JSON和数组时console.log打印出来很糟糕，console.table可以让我们看到可视化的数据结构，还可以命名列表的名字只需要传递参数进去。
const typeConsole = [
{name: 'log', type: 'standard'},
{name: 'info', type: 'standard'},
{name: 'table', type: 'wwwwowww'}
]
console.table(typeConsole)
const mySocial = {
facebook: true,
linkedin: true,
weibo: false,
meduim: false
}
console.table(mySocial, ["Social", "have Account"])
结果输出如下
screenshot3
第二种打印的方法并没有在列的标题上展示我自定义的文字。
Console.count, Console.time and Console.timeEnd
对于每个开发者在debug时，这三个方法就像是瑞士军刀一样好用。console.count统计并输出相同的标签被执行多少次。console.time以指定参数的名称作为开始计时器，并且可以在给定页面上同时运行10,000个计时器。我们可以使用console.timeEnd停止计时器并在控制台打印出收集的时间。
console.time('time start')
console.time('init arr')
const arr = new Array(20)
console.timeEnd('init arr')
for (var i = 0; i < arr.length; i++){
arr[i] = new Object()
const _type = (i %2 === 0) ? 'even ' : 'odd '
console.count(_type + 'added')
}
console.timeEnd('time start')
screenshot4
Console.trace and Console.assert
这些方法只是简单的从调用它的地方打印堆栈跟踪。想象一下在创建JS库的时候想知道用户什么时候会触发这个error。在这种情况下这个方法很管用。console.assert和console.trace很像，但是只在条件不满足时才执行。
function lesserThan (a, b) {
console.assert(a < b, {"message": "a is not lesser than b", "a": a, "b": b})
}
lesserThan(6,5)
console.trace('enddd')
输出如下：当输入6，5时
screenshot
删除所有的Consoles
使用完console之后经常需要我们清除它们。有时我们忘了清除直接发到了生产环境（经过了好长时间才注意到）。当然也不建议滥用console在不需要的地方（当控制台得出正确的结果最好将它删除），把错误日志和trace日志保留在开发环境帮助debug。作者经常使用Webpack在工作中或者自己的项目中。这有一个工具可以删除所有你不需要的console在生产环境构建的时候，它是uglifyjs-webpack-plugin
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
},
}
})] : []
}
又增多了几个debug的技能，技术之路探索永不止息。
跟着作者的节奏打开浏览器控制台，使用上面的代码进行操练吧，就会掌握这种调试技巧。
网友评论