来看一个简易的 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 +=
+
[trace] + inmessage +
;
}
} // 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 +=
+
[debug] + inmessage +
;
}
} // 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 +=
+
[info] + inmessage +
;
}
} // 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 +=
+
[warn] + inmessage +
;
}
} // 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 +=
+
[error] + inmessage +
;
}
} // 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 +=
+
[fatal] + inmessage +
;
}
} // end fatal().
} // end divlogger().
源码看完后，我们来测试一下这个“小包”，来看下面的测试源码：
复制代码 代码如下:
onclick=jscript.debug.enumprops(document.getelementbyid('enumpropslink'));>
enumprops()-shows all the properties of this link(显示此链接标签对象的所有属性和值)
log message will appear here
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);
onclick=log.debug('hmm, lets do some debugging');>
divlogger.log.debug() - try to add a debug message to the above div
onclick=log.info('just for your information');>
divlogger.log.info() - add a info message to the above div
onclick=log.warn('warning! danger will robinson!');>
divlogger.log.warn() - add a warn message to the above div
onclick=log.error('dave, there is an error in the ae-35 module');>
divlogger.log.error() - add a error message to the above div
onclick=log.fatal('game over man, game over!!');>
divlogger.log.fatal() - add a fatal message to the above div
上面的测试代码里面的 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 标签对象的所有属性及值：