Simple Javascript debugging package Debug package_javascript skills

Let's take a look at a simple Javascript debugging package: jscript.debug.js, which contains two functions. The first is used to traverse various properties of the object; the second is a general Debug function (actually, 'object' is more accurate ', haha), used to specify various error levels and the formatted display of various prompts and error messages, or the classic example in "Javascript Practical Combat", first look at the source code:

Copy code The code is as follows:

/**
* 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

<script> <BR>var log = new jscript.debug.DivLogger(); <BR>log.setTargetDiv(document.getElementById("divLog")); <BR>log.setLevel(log.LEVEL_DEBUG); <BR></script>


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

The <script> section in the above test code is instantiated for debug, the DIV for displaying information is set, and the minimum level for displaying information is set to: LEVEL_DEBUG: <BR>var log = new jscript.debug .DivLogger(); <BR>log.setTargetDiv(document.getElementById("divLog")); <BR>log.setLevel(log.LEVEL_DEBUG); <BR>Let’s see the effect: <BR><div class="htmlarea"> <TEXTAREA id="runcode52315"> <div id="jscript_debug_div" style="font-family: arial; font-size: 10pt; font-weight: bold; background-color: #ffffe0; padding: 4px;"> <a id="enumPropsLink" onclick="jscript.debug.enumProps(document.getElementById('enumPropsLink'));" href="javascript:void(0);"> enumProps()-Shows all the properties of this link (displays all properties and values ​​​​of this link label object) <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<a onclick="log.trace('Were tracing along now');" href="javascript:void(0);"> <a onclick="log.debug('Hmm, lets do some debugging');" href="javascript:void(0);"> 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 onclick="log.info('Just for your information');" href="javascript:void(0);"> DivLogger.log.debug() - Try to add a DEBUG message to the above DIV <a onclick="log.warn('Warning! Danger Will Robinson!');" href="javascript:void(0);"> DivLogger.log.info() - Add a INFO message to the above DIV <a onclick="log.error('Dave, there is an error in the AE-35 module');" href="javascript:void(0);"> DivLogger.log.warn() - Add a WARN message to the above DIV <a onclick="log.fatal('Game over man, game over!!');" href="javascript:void(0);"> DivLogger.log.error() - Add a ERROR message to the above DIV DivLogger.log.fatal() - Add a FATAL message to the above DIV <br/> <INPUT onclick="runEx('runcode52315')" type="button" value="运行代码"/><INPUT onclick="doCopy('runcode52315')" type="button" value="复制代码"/><INPUT onclick="doSave(runcode52315)" type="button" value="保存代码"/> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> [Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute <BR>]<script type="text/javascript">// <![CDATA[ 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 += "<div style='color:#" + this.LEVEL_TRACE_COLOR + ";'>" + "[TRACE] " + inMessage + ""; } } // End trace(). this.debug = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_DEBUG) && this.targetDiv) { this.targetDiv.innerHTML += "<div style='color:#" + this.LEVEL_DEBUG_COLOR + ";'>" + "[DEBUG] " + inMessage + ""; } } // End debug(). this.info = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_INFO) && this.targetDiv) { this.targetDiv.innerHTML += "<div style='color:#" + this.LEVEL_INFO_COLOR + ";'>" + "[INFO] " + inMessage + ""; } } // End info(). this.warn = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_WARN) && this.targetDiv) { this.targetDiv.innerHTML += "<div style='color:#" + this.LEVEL_WARN_COLOR + ";'>" + "[WARN] " + inMessage + ""; } } // End warn(). this.error = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_ERROR) && this.targetDiv) { this.targetDiv.innerHTML += "<div style='color:#" + this.LEVEL_ERROR_COLOR + ";'>" + "[ERROR] " + inMessage + ""; } } // End error(). this.fatal = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_FATAL) && this.targetDiv) { this.targetDiv.innerHTML += "<div style='color:#" + this.LEVEL_FATAL_COLOR + ";'>" + "[FATAL] " + inMessage + ""; } } // End fatal(). } // End DivLogger(). // ]]></script> Click "enumProps() -Shows all..." (the first link), the browser pops up a box as shown below (Opera), which lists in detail all the attributes and values ​​of the a tag object you clicked: