使用 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>
用法和四种日志
如何操作 Console 面板?
  • 打开 chrome-devtools
  • Console 可以出现在任何一个面板下方;使用 ESC 键打开/关闭(show/hide console drawer);
  • Filter 过滤器的打开/关闭;
    Debug 信息太多,使用 Filter 缩小范围就是一个不错的方法;


    Filter 过滤器的打开/关闭:蓝色表示打开
  • 常用的日志信息:Errors,Warnings,Info,Logs;

推荐阅读更多精彩内容

  • 在应用程序中添加日志记录总的来说基于三个目的:监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析...
    时待吾阅读 2,693评论 0 5
  • 在应用程序中添加日志记录总的来说基于三个目的:监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析...
    时待吾阅读 2,456评论 1 13
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 88,856评论 13 123
  • Spring Boot-日志配置(超详细) 更新日志:20170810 更新通过 application.yml传...
    inke阅读 42,331评论 7 101
  • 国贸,与师兄师姐探讨学习,主题为舌尖上的众筹之舌尖上的安全。 翁师兄提到如下关键词和书名,布鲁氏病,自然农耕,一根...
    许海波阅读 76评论 0 0