您好,欢迎您来到UED用户体验网!
您当前位置:UED用户体验网首页 >> 前端开发 >> 关于前端开发调试日志

关于前端开发调试日志

2015-12-11 09:37:10 来源:UED用户体验网 浏览:633
内容提要:1. 并不是所有的浏览器都有console对象,比如IE6-IE7本身是没有开发控制台的,除非自己安装IE Dev toolbar,IE8自带DevToolbar,但如果不开启,console是undefined,会导致浏览器报错。
2. console.log本身是打出程序执行日志,这些信息本身是用于调试,发布到线上之后是否需要清除掉?

 

现在前端开发使用console.log是最常见的调试方式之一,在控制台能很方便的看到程序执行日志,但存在几个问题:

我们先看第一个问题

1.使用前先判断

使用console.log的时候需要先判断console是否是对象,并且console.log是否是方法

if(!!console && typeof console.log === "function"){
    console.log("here is log message");
}

2.抽象成函数

但每次都这么用,势必很复杂,所以可以抽象成自己的函数,比如:

function myLog(message){
   if(!!console && typeof console.log === "function"){
      console.log(message || "");
   }
}

myLog("here is log message");

这样做的缺点有几个,一个是用自己的函数去替换console.log这种深入人心的代码,在落地执行上多少都有些困难,尤其是团队越大,越有人不遵循规范。另外,在控制台打出日志的代码行数提示时,总提示myLog那一行,而不是真正的代码逻辑行。

3.还有种方案,在JS初始化的时候对console做一次判断,防止出错。

比如:

(function(con) {
  'use strict';
  var prop, method;
  var empty = {};
  var dummy = function() {};
  var properties = 'memory'.split(',');
  var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
     'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
     'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
  while (prop = properties.pop()) con[prop] = con[prop] || empty;
  while (method = methods.pop()) con[method] = con[method] || dummy;
})(this.console = this.console || {});

对于第二个问题

发布时如何去掉console.log的调试信息,保证线上环境的干净,也两种方案。

1.使用grunt插件grunt-removing-log

插件地址:https://github.com/ehynds/grunt-remove-logging
该插件可以自动去除console.log这样的代码,可以在实际项目中,debug模式不启用,而build模式启用。

2.使用grunt插件grunt-contrib-uglifyConditional compilation

grunt-contrib-uglify插件可以配置类似条件编译的特性:

grunt.initConfig({
  uglify: {
    options: {
      compress: {
        global_defs: {
          "DEBUG": false
        },
        dead_code: true
      }
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});

详情参考 https://github.com/gruntjs/grunt-contrib-uglify

3.使用URL参数控制是否输出日志

这个需要配合第一个点,自行去定义console.log的含义。需要判断URL是否有debug=true这样的参数,如果有,则执行console.log,否则可以让console.log指向到空函数。
案例: 国内某视频网站就是全站URL加入debug=true,都可以看到调试日志,好处是方便开发快速定位问题,但缺点是如果用户知道,那么可能会泄露不该有的信息,不过…JS本身明文的,而且还可以抓包,这些问题不大。

转载<< 关于前端开发调试日志 >>请注明来源于互联网最具影响力的UED发言平台!用户体验网 - Hbued.com

关注HBUED创始人微信号:只需用手机微信扫一扫!

我们提供最全的互联网招聘信息、高端人脉信息、用户体验分析研究、互联网产品定位、网站运营推广等信息,关注HBUED掌门人的微信,可以直接与其沟通交流!

互联网人脉库入驻

优先被名企高薪发现你信息

我是高端互联网人士要入驻

名企高薪招聘发布

帮企业第一时间免费找人脉

我是互联网企业要发布招聘

爆料本地互联网事

每天爆料最新的身边互联网

我有最新互联网新闻要爆料

最新企业项目宣传

帮你针对互联网精准宣传

我要宣传我的最新创业项目




© 2008-2016 Hbued.com 版权所有 著作权与商标声明 | 关于我们 | 我要投稿 | 关于创始人 | 商务合作 | QQ群:66206675 | 谢绝IE6.0浏览器

UED用户体验网 | 互联网+ | 用户体验 | 互联网资讯 | 网站运营 | 移动互联网 | 电子商务 | 创业访谈 | 互联网大佬 | 互联网人脉库 | 产品经理 | 产品设计 | 交互设计 | 视觉设计 | 前端开发 | 互联网招聘 | 热门话题