前端開(kāi)發(fā)有一個(gè)問(wèn)題，就是模塊集成時(shí)發(fā)現(xiàn)有 BUG 后节榜，定位問(wèn)題比較困難。本文介紹一個(gè)方法形入，利用 console log 幫助定位全跨；
為了能兼顧生產(chǎn)環(huán)境，對(duì) console 進(jìn)行了簡(jiǎn)單包裝亿遂，支持 DEBUG浓若、INFO、WARN蛇数、ERROR 四種級(jí)別日志的簡(jiǎn)單設(shè)置挪钓；
比如：在生產(chǎn)環(huán)境只輸出 INFO、WARN 和 ERROR 級(jí)別的日志耳舅，而在測(cè)試環(huán)境就可以輸出 DEBUG 級(jí)別碌上；這樣寫(xiě)程序時(shí)倚评，就放心大膽地輸出日志了；
Log Level
| log level | 含義 | 備注 |
|-|-|-|-|
|LOG| 調(diào)試 | console.log馏予，debug.log |
|INFO|數(shù)據(jù)：用于模塊之間接口數(shù)據(jù)的記錄| console.info, debug.info |
|WARN|警告| console.warn天梧，debug.warn |
|ERROR| 錯(cuò)誤| console.error，debug.error |
- console.debug 等同于 console.log霞丧；
- 生產(chǎn)環(huán)境：默認(rèn) INFO呢岗；
- 測(cè)試環(huán)境：默認(rèn) DEBUG；
-
MDN 對(duì)這四種日志有詳細(xì)說(shuō)明蛹尝，各個(gè)瀏覽器支持的都不錯(cuò)后豫；
在 Chrom 里面：
info 藍(lán)色圓形 i 標(biāo)識(shí)；
warn 黃色三角 ! 標(biāo)識(shí)突那；
error 紅色圓形 x 標(biāo)識(shí)挫酿； - 了解 console API；
為何要輸出 log愕难？
- 有助于定位問(wèn)題早龟；
- 有助于模塊測(cè)試；
記錄日志會(huì)影響性能么猫缭？
- 對(duì)速度會(huì)有影響拄衰，但通常 可以忽略；
- 輸出日志時(shí)饵骨，請(qǐng)對(duì)數(shù)據(jù)安全保持警惕；
比如茫打，密碼居触、隱私信息在任何情況下都不要輸出；
代碼示例
<script>
var Debugger = function(gState, klass) {
this.debug = {}
if (gState && klass.isDebug) {
for (var m in console)
if (typeof console[m] == 'function')
this.debug[m] = console[m].bind(window.console, klass.toString()+": ")
}else{
for (var m in console)
if (typeof console[m] == 'function') {
this.debug[m] = function(){}
// 這里可以實(shí)現(xiàn) Log Level老赤，比如設(shè)置 INFO轮洋，則 DEBUG 級(jí)別日志就不會(huì)輸出，而 INFO抬旺、WARN 和 ERROR 會(huì)輸出弊予；
}
}
return this.debug
}
isDebug = true //global debug state，生產(chǎn)環(huán)境設(shè)為 false开财；
logLevel = 'DEBUG'
debug = Debugger(isDebug, this)
debug.log('a debug log!')
debug.info('an info log!')
debug.warn('a warning log!')
debug.error('an error log!')
</script>
用法和四種日志
- a proper wrapper for console log汉柒；
- Chrome 高級(jí)調(diào)試技術(shù)（ADVANCED DEBUGGING TECHNIQUES IN JAVASCRIPT）；
- 借助工具责鳍，可以在 js 發(fā)布時(shí)去除調(diào)試代碼碾褂；
比如：UglifyJS2 這個(gè)壓縮工具就可以通過(guò) drop_console 選項(xiàng)舍棄到 console.* 函數(shù)調(diào)用； - 使用 Google Closure Tools 也是一個(gè)不錯(cuò)的做法历葛，對(duì) js 代碼進(jìn)行優(yōu)化正塌；
如何操作 Console 面板？
- 打開(kāi) chrome-devtools；
- Console 可以出現(xiàn)在任何一個(gè)面板下方乓诽；使用
ESC鍵打開(kāi)/關(guān)閉（show/hide console drawer）帜羊； -
Filter 過(guò)濾器的打開(kāi)/關(guān)閉；
Debug 信息太多鸠天，使用 Filter 縮小范圍就是一個(gè)不錯(cuò)的方法讼育；
Filter 過(guò)濾器的打開(kāi)/關(guān)閉：藍(lán)色表示打開(kāi) - 常用的日志信息：Errors，Warnings粮宛，Info窥淆，Logs；
