Take a look at a simple Javascript Debug package: Jscript.debug.js, which contains two functions, the first to traverse each property of the object, and the second is a generic debug function (actually say ' object ' comparison '). Precise ', hehe ', used to specify a variety of error levels and their various prompts, the format of the error message display, or "Javascript combat" above the classic example, first look at the source code:
/**
* Jscript.debug Package
* This package contains utility functions for helping debug JavaScript.
*
*/
/* Namespace */
if (typeof JScript = = ' undefined ') {
JScript = function () {}
}
Jscript.debug = function () {}
/**
* This simple function is one of the Handiest:pass it object, and it
* 'll pop an alert () listing all the properties of the object and their
* values. (This function is used to traverse the property of the object and its corresponding value and display it)
*
* @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 so sends all logs messages to a specified
* DIV. (This is a simple debug logging system)
*/
Jscript.debug.DivLogger = function () {
/**
* The following are faux constants that define the various levels a log
* Instance can is set to output. (The following constants are used to define the error level)
*/
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. (defines the display color of various errors)
*/
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 levels the instance will show. (Minimum error level to display, defaults to 3)
*/
This.loglevel = 3;
/**
* Targetdiv is the DIV object to output.
*/
This.targetdiv = null;
/**
* This function is used to set the minimum level a log instance would show.
* (define the minimum error level to be displayed here)
* @param inlevel One of the level constants. Any message at the level
* or a higher level would be displayed, others would not.
*/
This.setlevel = function (inlevel) {
This.loglevel = Inlevel;
}//End Setlevel ().
/**
* This function is used to set the target DIV-all messages are
* Written to. This is the DIV ' s existing contents
* are cleared out. (Set information to display the DIV, when called this function, the original information will be cleared)
*
* @param intargetdiv The DIV object, 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 is
* Logged. (this function is used to determine if an existing error level should be displayed)
*
* @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.
* (format displays error level information for TRACE, and so on)
* @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 is logs messages at the 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 the 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 is logs messages at the 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 is logs messages at the 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 is logs messages at the 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 ().
After reading the source code, we test this "small bag" to see the following test source:
<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 property of this link (displays all properties and values for this linked label object)
</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 would 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 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 above DIV
</a><br>
<a href= "javascript:void (0);"
onclick= "Log.info (' Just for your information ');" >
DivLogger.log.info ()-Add a info to the above DIV
</a><br>
<a href= "javascript:void (0);"
onclick= "Log.warn (' warning! Danger would 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 a 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 Mans, Game over!! ');" >
DivLogger.log.fatal ()-ADD a fatal message to the above DIV
</a><br>
<br><br>
</div>
The above test code inside the <script> section for debug instantiation, set the display information DIV, and set the display information to the minimum level: Level_debug:
Log.setlevel (log. Level_debug);
<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 + this. Level_trace_color + "; ' > "+" [TRACE] "+ inmessage + </div>"; }//End Trace (). This.debug = function (inmessage) {if this.shouldbelogged (this. Level_debug) && this.targetdiv) {This.targetDiv.innerHTML + = "<div + this. Level_debug_color + "; ' > "+" [DEBUG] "+ inmessage + </div>"; }//End debug (). This.info = function (inmessage) {if this.shouldbelogged (this. Level_info) && this.targetdiv) {This.targetDiv.innerHTML + = "<div + this. Level_info_color + "; ' > "+" [INFO] "+ inmessage + </div>"; }//End info (). This.warn = function (inmessage) {if this.shouldbelogged (this. Level_warn) && this.targetdiv) {THIS.Targetdiv.innerhtml + = "<div + this." Level_warn_color + "; ' > "+" [WARN] "+ inmessage + </div>"; }//End warn (). This.error = function (inmessage) {if this.shouldbelogged (this. Level_error) && this.targetdiv) {This.targetDiv.innerHTML + = "<div + this. Level_error_color + "; ' > "+" [ERROR] "+ inmessage + </div>"; }//End error (). This.fatal = function (inmessage) {if this.shouldbelogged (this. level_fatal) && this.targetdiv) {This.targetDiv.innerHTML + = "<div + this. Level_fatal_color + "; ' > "+" [FATAL] "+ inmessage + </div>"; }//End Fatal (). }//End Divlogger (). ]]></script> <div id= "Jscript_debug_div" > <a id= "Enumpropslink" Jscript.debug.enumProps (document.getElementById (' Enumpropslink ')); "href=" javascript:void (0); " > Enumprops ()-shows The properties of this link (display all properties and values for this linked label object) <div id= "Divlog" >log message would Appear here</div><script type= "Text/javascript" >//<! [cdata[var log = new Jscript.debug.DivLogger (); Log.settargetdiv (document.getElementById ("Divlog")); Log.setlevel (log. Level_debug); ]]></script> <a onclick= "log.trace (' were tracing along now ');" href= "javascript:void (0);" > DivLogger.log.trace ()-Try to add a trace above DIV (won ' t work because it ' s below the specified DE BUG level); <a onclick= "Log.debug (' Hmm, lets do some debugging ');" href= "javascript:void (0);" > DivLogger.log.debug ()-Try to add a debug above DIV <a onclick= log.info (' Just for your infor Mation '); "href=" javascript:void (0); " > DivLogger.log.info ()-Add a info to the above DIV <a onclick= log.warn (' warning! Danger would robinson! '); href= "javascript:void (0);" > DivLogger.log.warn ()-ADD a warn message to the above DIV <a onclick= "Log.error" (' Dave, there are an error in The AE-35 module '); "href=" javascript:void (0); " > DivLogger.log.error ()-ADD A error message to the above DIV <a onclick= "Log.fatal (' Game over Mans, Game over!! '); "href=" javascript:void (0); " > DivLogger.log.fatal ()-ADD a fatal message to the above DIV </div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
When clicking on "Enumprops ()-shows all ..." (first link), the browser pop-up box appears as shown in the following image (Opera), detailing all the properties and values of the a tag object you clicked on:
