Simple Javascript debugging package Debug package

Let's look at a simple Javascript debugging package: jscript. debug. js contains two functions. The first is used to traverse each attribute of an object; the second is a general Debug function (in fact, 'object' is more 'accurate ), it is used to specify the error levels and the formatting display of various prompts and error messages. It is also a classic example above Javascript practice. Let's look at the source code first:

Copy codeThe Code is as follows :/**
* 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 an object, and it
* Will pop an alert () listing all the properties of the object and their
* Values. (This function is used to traverse object attributes and their corresponding values and display them)
*
* @ Param inObj The object to display properties.
*/
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. (This is a simple debug Logging System)
*/
Jscript. debug. DivLogger = function (){

/**
* The following are faux constants that define the varous levels a log
* Instance can be set to output. (The following constant is 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. (the display color of various errors is defined)
*/
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. (the minimum error level to be displayed. the default value is 3)
*/
This. logLevel = 3;

/**
* TargetDIV is the DIV object to output.
*/
This.tar getDiv = null;

/**
* This function is used to set the minimum level a log instance will show.
* (The minimum error level to be displayed is defined here)
* @ 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. (set the DIV for information display. When this function is called, the original information will be cleared)
*
* @ Param inTargetDiv The DIV object that all messages are written.
*/
This. setTargetDiv = function (inTargetDiv ){

This.tar getDiv = inTargetDiv;
This.tar getDiv. innerHTML = "";

} // End setTargetDiv ().

/**
* This function is called to determine if a participant message meets or
* Exceeds the current level of the log instance and shoshould therefore be
* Logged. (This function is used to determine whether the 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 and display TRACE error level information, and push it accordingly)
* @ Param inMessage The message to log.
*/
This. trace = function (inMessage ){

If (this. shouldBeLogged (this. LEVEL_TRACE) & this.tar getDiv ){
This.tar getDiv. 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.tar getDiv ){
This.tar getDiv. 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.tar getDiv ){
This.tar getDiv. 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.tar getDiv ){
This.tar getDiv. 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.tar getDiv ){
This.tar getDiv. 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.tar getDiv ){
This.tar getDiv. innerHTML + =
"<Div style = 'color: #" + this. LEVEL_FATAL_COLOR + "; '>" +
"[FATAL]" + inMessage + "</div> ";
}

} // End fatal ().

} // End DivLogger ().

After reading the source code, let's test this "packet" and see the following test source code:

Copy codeThe Code is as follows: <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 (display all attributes and values of this link tag object)
</A>
<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>

</Div>

The <script> section in the test code above carries out the debug instantiation, sets the DIV of the display information, and sets the minimum level of the display information to: LEVEL_DEBUG:
Var log = new jscript. debug. DivLogger ();
Log. setTargetDiv (document. getElementById ("divLog "));
Log. setLevel (log. LEVEL_DEBUG );
To see how it works:<Br/> enumProps ()-Shows all the properties of this link (display all attributes and values of this link tag object) <br/> </p> Log message will appear here <p> <br/> DivLogger. log. trace ()-Try to add a TRACE message to the above DIV <br/> (won't work because it's below the specified DEBUG level ); <br/> </p> <br/> DivLogger. log. debug ()-Try to add a DEBUG message to the above DIV <br/> </p> <br/> DivLogger.log.info () -Add a INFO message to the above DIV <br/> </p> <br/> DivLogger. log. warn ()-Add a WARN message to the above DIV <br/> </p> <br/> DivLogger. log. error ()-Add a ERROR message to the above DIV <br/> </p> <br/> DivLogger. log. fatal ()-Add a FATAL message to the above DIV <br/> </p> <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Click "enumProps ()-Shows all ......" The pop-up box in the browser is shown in (Opera). It lists all the attributes and values of the tag object you click in detail: