简易 Javascript 调试包 | Debug 包

来看一个简易的 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 +=

      "<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.targetDiv) {

      this.targetDiv.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.targetDiv) {

      this.targetDiv.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.targetDiv) {

      this.targetDiv.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.targetDiv) {

      this.targetDiv.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.targetDiv) {

      this.targetDiv.innerHTML +=

      "<div style='color:#" + this.LEVEL_FATAL_COLOR + ";'>" +

      "[FATAL] " + inMessage + "</div>";

    }



  } // End fatal().



} // End DivLogger().

源码看完后，我们来测试一下这个“小包”，来看下面的测试源码：

<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(显示此链接标签对象的所有属性和值)

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



</div>

上面的测试代码里面的 <script> 段进行了 debug 的实例化，设置了显示信息的 DIV，而且设置了显示信息的最小级别为：LEVEL_DEBUG：

var log = new jscript.debug.DivLogger();

log.setTargetDiv(document.getElementById("divLog"));

log.setLevel(log.LEVEL_DEBUG);

来看看效果如何呢：

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

在点击“enumProps()-Shows all ……”（第一个 link ）的时候浏览器弹出的框如下图所示（Opera），详细地列出了你所点击的 a 标签对象的所有属性及值：

其中的信息很多，在别的浏览器下可能显示不全，信息代码摘录如下：（Opera 下）

accessKey = 

all = [object HTMLCollection]

attributes = [object NamedNodeMap]

baseURI = http://localhost/Javascript/Chapter03_package/packagesTest_main.htm?param1=test1&param2=test2

charset = 

childElementCount = 0

childNodes = [object NodeList]

children = [object HTMLCollection]

className = 

clientHeight = 0

clientLeft = 0

clientTop = 0

clientWidth = 543

contentEditable = inherit

coords = 

currentStyle = [object CSSStyleDeclaration]

dir = 

document = [object HTMLDocument]

firstChild = [object Text]

firstElementChild = null

hash = 

host = 

hostname = 

href = javascript:void(0);

hreflang = 

id = enumPropsLink

innerHTML = 

        enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值)

      

innerText = 

        enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值)

      

isContentEditable = false

lang = 

lastChild = [object Text]

lastElementChild = null

localName = A

name = 

namespaceURI = null

nextElementSibling = [object HTMLBRElement]

nextSibling = [object Text]

nodeName = A

nodeType = 1

nodeValue = null

offsetHeight = 16

offsetLeft = 9

offsetParent = [object HTMLBodyElement]

offsetTop = 300

offsetWidth = 543

outerHTML = <a href="javascript:void(0);" id="enumPropsLink" onclick="jscript.debug.enumProps(document.getElementById('enumPropsLink'));">

        enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值)

      </a>

outerText = 

        enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值)

      

ownerDocument = [object HTMLDocument]

parentElement = [object HTMLDivElement]

parentNode = [object HTMLDivElement]

pathname = void(0);

port = 

prefix = null

previousElementSibling = null

previousSibling = [object Text]

protocol = javascript:

rel = 

rev = 

scrollHeight = 16

scrollLeft = 0

scrollTop = 0

scrollWidth = 543

search = 

shape = 

sourceIndex = 50

spellcheck = true

style = [object CSSStyleDeclaration]

tabIndex = 0

tagName = A

target = 

text = 

        enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值)

      

textContent = 

        enumProps()-Shows all the properties of this link(显示此链接标签对象的所有属性和值)

      

title = 

type = 

unselectable = 

onclick = function anonymous(event) {

jscript.debug.enumProps(document.getElementById('enumPropsLink'));

}

onmousedown = null

onmouseup = null

onmouseover = null

onmousemove = null

onmouseout = null

onkeypress = null

onkeydown = null

onkeyup = null

onload = null

onunload = null

onfocus = null

onblur = null

ondblclick = null

oncontextmenu = null

onloadstart = null

onprogress = null

onsuspend = null

onstalled = null

onloadend = null

onemptied = null

onplay = null

onpause = null

onloadedmetadata = null

onloadeddata = null

onwaiting = null

onplaying = null

onseeking = null

onseeked = null

ontimeupdate = null

onended = null

oncanplay = null

oncanplaythrough = null

onratechange = null

ondurationchange = null

onvolumechange = null

focus = function focus() { [native code] }

blur = function blur() { [native code] }

toString = function toString() { [native code] }

removeNode = function removeNode() { [native code] }

click = function click() { [native code] }

insertAdjacentElement = function insertAdjacentElement() { [native code] }

insertAdjacentHTML = function insertAdjacentHTML() { [native code] }

insertAdjacentText = function insertAdjacentText() { [native code] }

removeAttributeNode = function removeAttributeNode() { [native code] }

contains = function contains() { [native code] }

scrollIntoView = function scrollIntoView() { [native code] }

getBoundingClientRect = function getBoundingClientRect() { [native code] }

getClientRects = function getClientRects() { [native code] }

getAttribute = function getAttribute() { [native code] }

getAttributeNS = function getAttributeNS() { [native code] }

hasAttribute = function hasAttribute() { [native code] }

hasAttributeNS = function hasAttributeNS() { [native code] }

setAttribute = function setAttribute() { [native code] }

setAttributeNS = function setAttributeNS() { [native code] }

removeAttribute = function removeAttribute() { [native code] }

removeAttributeNS = function removeAttributeNS() { [native code] }

getAttributeNode = function getAttributeNode() { [native code] }

getAttributeNodeNS = function getAttributeNodeNS() { [native code] }

setAttributeNode = function setAttributeNode() { [native code] }

setAttributeNodeNS = function setAttributeNodeNS() { [native code] }

getElementsByTagName = function getElementsByTagName() { [native code] }

getElementsByTagNameNS = function getElementsByTagNameNS() { [native code] }

getElementsByClassName = function getElementsByClassName() { [native code] }

querySelector = function querySelector() { [native code] }

querySelectorAll = function querySelectorAll() { [native code] }

dispatchEvent = function dispatchEvent() { [native code] }

insertBefore = function insertBefore() { [native code] }

replaceChild = function replaceChild() { [native code] }

removeChild = function removeChild() { [native code] }

appendChild = function appendChild() { [native code] }

hasChildNodes = function hasChildNodes() { [native code] }

cloneNode = function cloneNode() { [native code] }

normalize = function normalize() { [native code] }

isSupported = function isSupported() { [native code] }

hasAttributes = function hasAttributes() { [native code] }

isSameNode = function isSameNode() { [native code] }

isEqualNode = function isEqualNode() { [native code] }

getFeature = function getFeature() { [native code] }

compareDocumentPosition = function compareDocumentPosition() { [native code] }

addEventListener = function addEventListener() { [native code] }

removeEventListener = function removeEventListener() { [native code] }

lookupPrefix = function lookupPrefix() { [native code] }

isDefaultNamespace = function isDefaultNamespace() { [native code] }

lookupNamespaceURI = function lookupNamespaceURI() { [native code] }

selectNodes = function selectNodes() { [native code] }

selectSingleNode = function selectSingleNode() { [native code] }

ELEMENT_NODE = 1

ATTRIBUTE_NODE = 2

TEXT_NODE = 3

CDATA_SECTION_NODE = 4

ENTITY_REFERENCE_NODE = 5

ENTITY_NODE = 6

PROCESSING_INSTRUCTION_NODE = 7

COMMENT_NODE = 8

DOCUMENT_NODE = 9

DOCUMENT_TYPE_NODE = 10

DOCUMENT_FRAGMENT_NODE = 11

NOTATION_NODE = 12

DOCUMENT_POSITION_DISCONNECTED = 1

DOCUMENT_POSITION_PRECEDING = 2

DOCUMENT_POSITION_FOLLOWING = 4

DOCUMENT_POSITION_CONTAINS = 8

DOCUMENT_POSITION_CONTAINED_BY = 16

DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 32

由于浏览器的不同，显示的信息会有差别。