简易 Javascript 调试包 Debug包

来看一个简易的 Javascript 调试包：jscript.debug.js，包含两个函数，第一个用来遍历对象的各个属性；第二个是一个通用的 Debug 函数（其实 说‘对象'比较‘精确些'，呵呵），用来规定各种错误级别及其各种提示、错误信息的格式化显示，还是《Javascript 实战》上面的经典例子，先看源码：

/** 
* jscript.debug package 
* This package contains utility functions for helping debug JavaScript. 
* 
*/ 
/*命名空间*/ 
if (typeof jscript == 'undefined') { 
jscript = function() { } 
} 
jscript.debug = function() { } 

/** 
* This simple function is one of the handiest: pass it an object, and it 
* will pop an alert() listing all the properties of the object and their 
* values.（这个函数用来遍历对象的属性及其相应的值，并显示出来） 
* 
* @param inObj The object to display properties of. 
*/ 
jscript.debug.enumProps = function(inObj) { 

var props = ""; 
var i; 
for (i in inObj) { 
props += i + " = " + inObj[i] + "\n"; 
} 
alert(props); 

} // End enumProps(). 

/** 
* This is a very simple logger that sends all log messages to a specified 
* DIV.（这是一个简单的 debug 日志记录系统） 
*/ 
jscript.debug.DivLogger = function() { 

/** 
* The following are faux constants that define the various levels a log 
* instance can be set to output.（下面的常量用来定义错误级别） 
*/ 
this.LEVEL_TRACE = 1; 
this.LEVEL_DEBUG = 2; 
this.LEVEL_INFO = 3; 
this.LEVEL_WARN = 4; 
this.LEVEL_ERROR = 5; 
this.LEVEL_FATAL = 6; 

/** 
* These are the font colors for each logging level.（定义各种错误的显示颜色） 
*/ 
this.LEVEL_TRACE_COLOR = "a0a000"; 
this.LEVEL_DEBUG_COLOR = "64c864"; 
this.LEVEL_INFO_COLOR = "000000"; 
this.LEVEL_WARN_COLOR = "0000ff"; 
this.LEVEL_ERROR_COLOR = "ff8c00"; 
this.LEVEL_FATAL_COLOR = "ff0000"; 

/** 
* logLevel determines the minimum message level the instance will show.（需要显示的最小错误级别，默认为 3） 
*/ 
this.logLevel = 3; 

/** 
* targetDIV is the DIV object to output to. 
*/ 
this.targetDiv = null; 

/** 
* This function is used to set the minimum level a log instance will show. 
*（在这里定义需要显示的最小错误级别） 
* @param inLevel One of the level constants. Any message at this level 
* or a higher level will be displayed, others will not. 
*/ 
this.setLevel = function(inLevel) { 

this.logLevel = inLevel; 

} // End setLevel(). 

/** 
* This function is used to set the target DIV that all messages are 
* written to. Note that when you call this, the DIV's existing contents 
* are cleared out.（设置信息显示的 DIV，调用此函数的时候，原有的信息将被清除） 
* 
* @param inTargetDiv The DIV object that all messages are written to. 
*/ 
this.setTargetDiv = function(inTargetDiv) { 

this.targetDiv = inTargetDiv; 
this.targetDiv.innerHTML = ""; 

} // End setTargetDiv(). 

/** 
* This function is called to determine if a particular message meets or 
* exceeds the current level of the log instance and should therefore be 
* logged.（此函数用来判定现有的错误级别是否应该被显示） 
* 
* @param inLevel The level of the message being checked. 
*/ 
this.shouldBeLogged = function(inLevel) { 

if (inLevel >= this.logLevel) { 
return true; 
} else { 
return false; 
} 

} // End shouldBeLogged(). 

/** 
* This function logs messages at TRACE level. 
*（格式化显示 TRACE 的错误级别信息，往依此类推） 
* @param inMessage The message to log. 
*/ 
this.trace = function(inMessage) { 

if (this.shouldBeLogged(this.LEVEL_TRACE) && this.targetDiv) { 
this.targetDiv.innerHTML += 
"<div style='color:#" + this.LEVEL_TRACE_COLOR + ";'>" + 
"[TRACE] " + inMessage + "</div>"; 
} 

} // End trace(). 

/** 
* This function logs messages at DEBUG level. 
* 
* @param inMessage The message to log. 
*/ 
this.debug = function(inMessage) { 

if (this.shouldBeLogged(this.LEVEL_DEBUG) && this.targetDiv) { 
this.targetDiv.innerHTML += 
"<div style='color:#" + this.LEVEL_DEBUG_COLOR + ";'>" + 
"[DEBUG] " + inMessage + "</div>"; 
} 

} // End debug(). 

/** 
* This function logs messages at INFO level. 
* 
* @param inMessage The message to log. 
*/ 
this.info = function(inMessage) { 

if (this.shouldBeLogged(this.LEVEL_INFO) && this.targetDiv) { 
this.targetDiv.innerHTML += 
"<div style='color:#" + this.LEVEL_INFO_COLOR + ";'>" + 
"[INFO] " + inMessage + "</div>"; 
} 

} // End info(). 

/** 
* This function logs messages at WARN level. 
* 
* @param inMessage The message to log. 
*/ 
this.warn = function(inMessage) { 

if (this.shouldBeLogged(this.LEVEL_WARN) && this.targetDiv) { 
this.targetDiv.innerHTML += 
"<div style='color:#" + this.LEVEL_WARN_COLOR + ";'>" + 
"[WARN] " + inMessage + "</div>"; 
} 

} // End warn(). 

/** 
* This function logs messages at ERROR level. 
* 
* @param inMessage The message to log. 
*/ 
this.error = function(inMessage) { 

if (this.shouldBeLogged(this.LEVEL_ERROR) && this.targetDiv) { 
this.targetDiv.innerHTML += 
"<div style='color:#" + this.LEVEL_ERROR_COLOR + ";'>" + 
"[ERROR] " + inMessage + "</div>"; 
} 

} // End error(). 

/** 
* This function logs messages at FATAL level. 
* 
* @param inMessage The message to log. 
*/ 
this.fatal = function(inMessage) { 

if (this.shouldBeLogged(this.LEVEL_FATAL) && this.targetDiv) { 
this.targetDiv.innerHTML += 
"<div style='color:#" + this.LEVEL_FATAL_COLOR + ";'>" + 
"[FATAL] " + inMessage + "</div>"; 
} 

} // End fatal(). 

} // End DivLogger().

源码看完后，我们来测试一下这个“小包”，来看下面的测试源码：

<div id="jscript_debug_div" style="font-family:arial; font-size:10pt; font-weight:bold; display:none; background-color:#ffffe0; padding:4px;"> 

<a href="javascript:void(0);" id="enumPropsLink" 
onClick="jscript.debug.enumProps(document.getElementById('enumPropsLink'));"> 
enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值) 
</a> 
<br><br> 

<div id="divLog" style="font-family:arial; font-size: 12pt; padding: 4px; background-color:#ffffff; border:1px solid #000000; width:50%; height:300px; overflow:scroll;">Log message will appear here</div> 
<script> 
var log = new jscript.debug.DivLogger(); 
log.setTargetDiv(document.getElementById("divLog")); 
log.setLevel(log.LEVEL_DEBUG); 
</script> 
<br> 
<a href="javascript:void(0);" 
onClick="log.trace('Were tracing along now');"> 
DivLogger.log.trace() - Try to add a TRACE message to the above DIV 
(won't work because it's below the specified DEBUG level); 
</a><br> 
<a href="javascript:void(0);" 
onClick="log.debug('Hmm, lets do some debugging');"> 
DivLogger.log.debug() - Try to add a DEBUG message to the above DIV 
</a><br> 
<a href="javascript:void(0);" 
onClick="log.info('Just for your information');"> 
DivLogger.log.info() - Add a INFO message to the above DIV 
</a><br> 
<a href="javascript:void(0);" 
onClick="log.warn('Warning! Danger Will Robinson!');"> 
DivLogger.log.warn() - Add a WARN message to the above DIV 
</a><br> 
<a href="javascript:void(0);" 
onClick="log.error('Dave, there is an error in the AE-35 module');"> 
DivLogger.log.error() - Add a ERROR message to the above DIV 
</a><br> 
<a href="javascript:void(0);" 
onClick="log.fatal('Game over man, game over!!');"> 
DivLogger.log.fatal() - Add a FATAL message to the above DIV 
</a><br> 
<br><br> 

</div>

上面的测试代码里面的 <script> 段进行了 debug 的实例化，设置了显示信息的 DIV，而且设置了显示信息的最小级别为：LEVEL_DEBUG：
var log = new jscript.debug.DivLogger();
log.setTargetDiv(document.getElementById("divLog"));
log.setLevel(log.LEVEL_DEBUG);
来看看效果如何呢：

// = this.logLevel) {
return true;
} else {
return false;
}

} // End shouldBeLogged().
this.trace = function(inMessage) {

if (this.shouldBeLogged(this.LEVEL_TRACE) && this.targetDiv) {
this.targetDiv.innerHTML +=
"" +
"[TRACE] " + inMessage + "";
}

} // End trace().
this.debug = function(inMessage) {

if (this.shouldBeLogged(this.LEVEL_DEBUG) && this.targetDiv) {
this.targetDiv.innerHTML +=
"" +
"[DEBUG] " + inMessage + "";
}

} // End debug().

this.info = function(inMessage) {

if (this.shouldBeLogged(this.LEVEL_INFO) && this.targetDiv) {
this.targetDiv.innerHTML +=
"" +
"[INFO] " + inMessage + "";
}

} // End info().
this.warn = function(inMessage) {

if (this.shouldBeLogged(this.LEVEL_WARN) && this.targetDiv) {
this.targetDiv.innerHTML +=
"" +
"[WARN] " + inMessage + "";
}

} // End warn().
this.error = function(inMessage) {

if (this.shouldBeLogged(this.LEVEL_ERROR) && this.targetDiv) {
this.targetDiv.innerHTML +=
"" +
"[ERROR] " + inMessage + "";
}

} // End error().
this.fatal = function(inMessage) {

if (this.shouldBeLogged(this.LEVEL_FATAL) && this.targetDiv) {
this.targetDiv.innerHTML +=
"" +
"[FATAL] " + inMessage + "";
}

} // End fatal().

} // End DivLogger().
// ]]>


enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值)


Log message will appear here
//



DivLogger.log.trace() - Try to add a TRACE message to the above DIV
(won't work because it's below the specified DEBUG level);



DivLogger.log.debug() - Try to add a DEBUG message to the above DIV



DivLogger.log.info() - Add a INFO message to the above DIV



DivLogger.log.warn() - Add a WARN message to the above DIV



DivLogger.log.error() - Add a ERROR message to the above DIV



DivLogger.log.fatal() - Add a FATAL message to the above DIV






[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在点击“enumProps()-Shows all ……”（第一个 link ）的时候浏览器弹出的框如下图所示（Opera），详细地列出了你所点击的 a 标签对象的所有属性及值：