使用 console log 帮助定位 js 问题

前端开发有一个问题，就是模块集成时发现有 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；