简易 JavaScript 调试工具：对象属性遍历与分级日志记录

JavaScript 简易调试工具包介绍

这里展示一个轻量级的 JavaScript 调试工具包：jscript.debug.js。该工具包主要包含两个核心函数：第一个用于遍历并展示对象的所有属性；第二个则是一个通用的调试函数（更准确地说是针对“对象”的操作），用于定义不同的错误级别、提示信息以及错误信息的格式化显示。这个例子源自《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> 部分完成了调试器的实例化，指定了用于显示信息的 DIV 元素，并将最小显示级别设置为 LEVEL_DEBUG：

var log = new jscript.debug.DivLogger();

log.setTargetDiv(document.getElementById("divLog"));

log.setLevel(log.LEVEL_DEBUG);

接下来我们看看实际运行效果：

  <div id="jscript_debug_div" style="font-family: arial; font-size: 10pt; font-weight: bold; background-color: #ffffe0; padding: 4px;">  enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值)   <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>    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   </div> 

当点击“enumProps()-Shows all ……”（即第一个链接）时，浏览器会弹出一个提示框（如图所示，以 Opera 浏览器为例），详细列出了你所点击的 a 标签对象的所有属性及其对应的值。