来看一个简易的 Javascript 调试包：jscript.debug.js，包含两个函数，第一个用来遍历对象的各个属性；第二个是一个通用的 Debug 函数（其实 说‘对象'比较‘精确些'，呵呵），用来规定各种错误级别及其各种提示、错误信息的格式化显示，还是《Javascript 实战》上面的经典例子，先看源码：
复制代码 代码如下:
if (typeof jscript == 'undefined') {
jscript = function() { }
}
jscript.debug = function() { }
jscript.debug.enumProps = function(inObj) {
var props = "";
var i;
for (i in inObj) {
props += i + " = " + inObj[i] + "n";
}
alert(props);
} // End enumProps().
jscript.debug.DivLogger = function() {
this.LEVEL_TRACE = 1;
this.LEVEL_DEBUG = 2;
this.LEVEL_INFO = 3;
this.LEVEL_WARN = 4;
this.LEVEL_ERROR = 5;
this.LEVEL_FATAL = 6;
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";
this.logLevel = 3;
this.targetDiv = null;
this.setLevel = function(inLevel) {
this.logLevel = inLevel;
} // End setLevel().
this.setTargetDiv = function(inTargetDiv) {
this.targetDiv = inTargetDiv;
this.targetDiv.innerHTML = "";
} // End setTargetDiv().
this.shouldBeLogged = function(inLevel) {
if (inLevel >= 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().
源码看完后，我们来测试一下这个“小包”，来看下面的测试源码：
复制代码 代码如下:
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 标签对象的所有属性及值：
