基于DOM输出的轻量级JavaScript调试Logger组件

传统调试方式的局限性与改进思路

传统的alert调试方式存在中断程序执行的缺陷，有时获取的值并不准确，特别是在闭包环境中使用alert可能导致结果错误。而debugger语句虽然强大，但兼容性较差，仅IE浏览器支持良好。相比之下，将调试值输出到页面或写入Cookie是更合理的选择，这种方式既避免了alert带来的中断问题，也不受浏览器类型的限制，尽管操作起来相对繁琐。

为了解决上述问题，本文提出一个JavaScript调试组件。该组件的设计思路参考了log4net的记录机制，允许开发者通过类似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);
})(); 

组件使用方法与示例

如何调用该组件？

该组件在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.getElementById().innerHTML或频繁使用alert/debugger，大大简化了调试流程。

注：示例代码中使用的addHours方法是作者对JavaScript Date对象的扩展，如需了解更多扩展细节，可参考《扩展js的Date方法》一文。