看到了一篇文章覺得很有意思
原文是How you can improve your workflow using the JavaScript console 作者列舉了Console的其他用法，算我孤陋寡聞了蛇耀，平常Debug時(shí)只使用Console.log坎弯，看了這篇文章才知道有那么多有意思的方法，下面介紹給大家撩炊。
什么是Console
JavaScript console 是現(xiàn)在瀏覽器的一個(gè)特性崎脉，它可以為開發(fā)者提供
- 在網(wǎng)頁上查看錯(cuò)誤日志和警告日志
- 使用JS命令與網(wǎng)頁交互
- 在瀏覽器中直接Debug項(xiàng)目訪問DOM
- 分析網(wǎng)絡(luò)活動(dòng)
基本上在瀏覽器里它授權(quán)你寫，管理和監(jiān)聽JavaScript是否正確
Console.log, Console.error, Console.warn and Console.info
這些是最常見的方法呛踊，你可以傳遞多個(gè)參數(shù)啦撮，每個(gè)參數(shù)都被計(jì)算并連接到一個(gè)由空格分隔的字符串中，但是objec對(duì)象和array數(shù)組例外愉择，它們是通過屬性進(jìn)行分隔织中。
Console.group
這個(gè)方法允許你將一系列的console.log進(jìn)行分組（包括 error info 等）狭吼，在這個(gè)組中可以進(jìn)行折疊。語法也非常簡單刁笙，
function doSomthing (parm) {
console.group('group start')
console.log('date print', new Date())
console.log(123)
console.groupEnd()
console.log('out the group')
}
doSomthing()
結(jié)果如下：
Console.table
當(dāng)遇到特別大的JSON和數(shù)組時(shí)console.log打印出來很糟糕，console.table可以讓我們看到可視化的數(shù)據(jù)結(jié)構(gòu)前鹅，還可以命名列表的名字只需要傳遞參數(shù)進(jìn)去峭梳。
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"])
結(jié)果輸出如下
第二種打印的方法并沒有在列的標(biāo)題上展示我自定義的文字葱椭。
Console.count, Console.time and Console.timeEnd
對(duì)于每個(gè)開發(fā)者在debug時(shí)，這三個(gè)方法就像是瑞士軍刀一樣好用孵运。console.count統(tǒng)計(jì)并輸出相同的標(biāo)簽被執(zhí)行多少次掐松。console.time以指定參數(shù)的名稱作為開始計(jì)時(shí)器，并且可以在給定頁面上同時(shí)運(yùn)行10,000個(gè)計(jì)時(shí)器大磺。我們可以使用console.timeEnd停止計(jì)時(shí)器并在控制臺(tái)打印出收集的時(shí)間杠愧。
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')
Console.trace and Console.assert
這些方法只是簡單的從調(diào)用它的地方打印堆棧跟蹤。想象一下在創(chuàng)建JS庫的時(shí)候想知道用戶什么時(shí)候會(huì)觸發(fā)這個(gè)error锐锣。在這種情況下這個(gè)方法很管用绳瘟。console.assert和console.trace很像，但是只在條件不滿足時(shí)才執(zhí)行斤彼。
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')
輸出如下：當(dāng)輸入6蘸泻，5時(shí)
刪除所有的Consoles
使用完console之后經(jīng)常需要我們清除它們悦施。有時(shí)我們忘了清除直接發(fā)到了生產(chǎn)環(huán)境（經(jīng)過了好長時(shí)間才注意到）。當(dāng)然也不建議濫用console在不需要的地方（當(dāng)控制臺(tái)得出正確的結(jié)果最好將它刪除）穷蛹，把錯(cuò)誤日志和trace日志保留在開發(fā)環(huán)境幫助debug。作者經(jīng)常使用Webpack在工作中或者自己的項(xiàng)目中俩莽。這有一個(gè)工具可以刪除所有你不需要的console在生產(chǎn)環(huán)境構(gòu)建的時(shí)候乔遮，它是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
},
}
})] : []
}
又增多了幾個(gè)debug的技能蹋肮，技術(shù)之路探索永不止息。
跟著作者的節(jié)奏打開瀏覽器控制臺(tái)馁龟，使用上面的代碼進(jìn)行操練吧漆魔，就會(huì)掌握這種調(diào)試技巧。
