前端开发有一个问题，就是模块集成时发现有 BUG 后，定位问题比较困难。本文介绍一个方法，利用 console log 帮助定位；
为了能兼顾生产环境，对 console 进行了简单包装，支持 DEBUG、INFO、WARN、ERROR 四种级别日志的简单设置；
比如：在生产环境只输出 INFO、WARN 和 ERROR 级别的日志，而在测试环境就可以输出 DEBUG 级别；这样写程序时，就放心大胆地输出日志了；
Log Level
| log level | 含义 | 备注 |
|-|-|-|-|
|LOG| 调试 | console.log，debug.log |
|INFO|数据：用于模块之间接口数据的记录| console.info, debug.info |
|WARN|警告| console.warn，debug.warn |
|ERROR| 错误| console.error，debug.error |
- console.debug 等同于 console.log；
- 生产环境：默认 INFO；
- 测试环境：默认 DEBUG；
-
MDN 对这四种日志有详细说明，各个浏览器支持的都不错；
在 Chrom 里面：
info 蓝色圆形 i 标识；
warn 黄色三角 ! 标识；
error 红色圆形 x 标识； - 了解 console API；
为何要输出 log？
- 有助于定位问题；
- 有助于模块测试；
记录日志会影响性能么？
- 对速度会有影响，但通常 可以忽略；
- 输出日志时，请对数据安全保持警惕；
比如，密码、隐私信息在任何情况下都不要输出；
代码示例
<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(){}
// 这里可以实现 Log Level，比如设置 INFO，则 DEBUG 级别日志就不会输出，而 INFO、WARN 和 ERROR 会输出；
}
}
return this.debug
}
isDebug = true //global debug state，生产环境设为 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 高级调试技术（ADVANCED DEBUGGING TECHNIQUES IN JAVASCRIPT）；
- 借助工具，可以在 js 发布时去除调试代码；
比如：UglifyJS2 这个压缩工具就可以通过 drop_console 选项舍弃到 console.* 函数调用； - 使用 Google Closure Tools 也是一个不错的做法，对 js 代码进行优化；
如何操作 Console 面板？
- 打开 chrome-devtools；
- Console 可以出现在任何一个面板下方；使用
ESC键打开/关闭（show/hide console drawer）； -
Filter 过滤器的打开/关闭；
Debug 信息太多，使用 Filter 缩小范围就是一个不错的方法；
Filter 过滤器的打开/关闭：蓝色表示打开 - 常用的日志信息：Errors，Warnings，Info，Logs；
