简单实用的js调试logger组件实现代码

 更新时间:2010年11月20日 20:27:05   作者:  
开发js组件的时间调试总是麻烦的,最常用的就是用alert或者debugger来测试js的运行状态。
但这两种方式都有它的局限性,alert会有中断,有些时候alert出来的值并不可靠,闭包的时候用alert可能会得到不正确的值。debugger使用起来其实也挺纠结的,只有ie支持。所以最合理的方式是js把运行过程需要调试的值输出到页面,或者写到cookie也可以,这种方式不会有alert中断带来值不正确的问题,也不会受浏览器类型的限制,唯一纠结的是操作起来很麻烦。
于是,有了下面说的这个js组件。这个组件的实现参考了log4net组件的记录方式,我们利用这个js的logger组件,就可以用log的输出的方式来进行你的调试工作了。
复制代码 代码如下:

/*
js调试组件
*/
(function () {
var logger = function (level, object, viewType) {
this.level = level;
this.object = object;
this.viewType = viewType;
}
logger.LEVEL_DEBUG = 0;
logger.LEVEL_INFO = 1;
logger.LEVEL_WARN = 2;
logger.LEVEL_ERROR = 3;
logger.LEVEL_FATAL = 4;
logger.VIEW_TYPE_ALERT = 0;
logger.VIEW_TYPE_APPEND = 1;
logger.prototype = {
setLevel: function (level) {
this.level = level;
},
setObject: function (o) {
if (typeof o == 'string') {
this.object = document.getElementById(o);
} else {
this.object = o;
}
},
setViewType: function (type) {
this.viewType = type;
},
log: function (s) {
this.message(100, s);
},
debug: function (s) {
this.message(logger.LEVEL_DEBUG, s);
},
info: function (s) {
this.message(logger.LEVEL_INFO, s);
},
warn: function (s) {
this.message(logger.LEVEL_WARN, s);
},
error: function (s) {
this.message(logger.LEVEL_ERROR, s);
},
fatal: function (s) {
this.message(logger.LEVEL_FATAL, s);
},
message: function (level, s) {
if (level >= this.level) {
if (this.object != null) {
this.object.innerHTML = s;
} else if (this.viewType == logger.VIEW_TYPE_ALERT) {
alert(s);
} else {
document.body.appendChild(document.createTextNode(s));
document.body.appendChild(document.createElement("br"));
}
}
}
};
if (typeof window.Logger == 'undefined' || window.Logger == null)
window.Logger = new logger(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_APPEND);
})();

怎么使用呢?
这个js组件往window对象注册了Logger对象,我们可以用Logger.log/Logger.debug/Logger.info/Logger.warn/Logger.error/Logger.fatal来输出不同的调试信息。
示例代码如下:
复制代码 代码如下:

Logger.debug(new Date());
Logger.debug(new Date().addHours(3));

很简单,再也不用每个地方都写document.getElementId().innerHtml或者alert/debugger来输出内容了。
示例代码中使用的addHours是我扩展js的Date对象方法,想要了解更多的朋友可以查看《扩展js的Date方法》。

相关文章

  • js实现进度条的方法

    js实现进度条的方法

    这篇文章主要介绍了js实现进度条的方法,实例分析了两种不同的实现方法,并说明了setTimeout和setInterval的使用区别,非常具有实用价值,需要的朋友可以参考下
    2015-02-02
  • BootStrap table删除指定行的注意事项(笔记整理)

    BootStrap table删除指定行的注意事项(笔记整理)

    在前端开发中遇到这样的问题,对于table指定行的数据进行删除,花了好长时间才解决,今天小编抽时间给大家介绍BootStrap table删除指定行的注意事项,需要的朋友参考下吧
    2017-02-02
  • layUI布局使用教程

    layUI布局使用教程

    layui属于轻量级框架,简单美化.是用于开发后端模式,它在服务端页面上有非常好的效果,这篇文章主要介绍了layUI布局使用教程,需要的朋友可以参考下
    2022-09-09
  • Uncaught SyntaxError:Unexpected token '<' (at xxx.js)解决分析

    Uncaught SyntaxError:Unexpected token '<' (

    这篇文章主要为大家介绍了JS判断趋近于直线的多边形(退化多边形)实例探究,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2024-01-01
  • WEB 浏览器兼容 推荐收藏

    WEB 浏览器兼容 推荐收藏

    这是我总结多年的一个小文档,最近看见有人咨询浏览器兼容的问题,就贡献出来。
    2010-05-05
  • JS禁用页面上所有控件的实现方法(附demo源码下载)

    JS禁用页面上所有控件的实现方法(附demo源码下载)

    这篇文章主要介绍了JS禁用页面上所有控件的方法,涉及JavaScript捕捉页面元素的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • 解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

    解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题

    今天小编就为大家分享一篇解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 五步轻松实现JavaScript HTML时钟效果

    五步轻松实现JavaScript HTML时钟效果

    这篇文章主要为大家详细介绍了五步轻松实现JavaScript HTML时钟效果的代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • SharePoint 客户端对象模型 (一) ECMA Script

    SharePoint 客户端对象模型 (一) ECMA Script

    今天开始SharePoint Client对象模型的介绍,简而言之,SharePoint通过WCF技术在服务端提供数据服务,这些服务提供的内容相当于SharePoint API的一个子集
    2011-05-05
  • JS中解决谷歌浏览器记住密码输入框颜色改变功能

    JS中解决谷歌浏览器记住密码输入框颜色改变功能

    这篇文章主要介绍了JS中解决谷歌浏览器记住密码输入框颜色改变功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02

最新评论