簡(jiǎn)易 Javascript 調(diào)試包 Debug包
更新時(shí)間:2010年10月26日 20:41:49 作者:
來看一個(gè)簡(jiǎn)易的 Javascript 調(diào)試包 jscript.debug.js,包含兩個(gè)函數(shù)
來看一個(gè)簡(jiǎn)易的 Javascript 調(diào)試包:jscript.debug.js,包含兩個(gè)函數(shù),第一個(gè)用來遍歷對(duì)象的各個(gè)屬性;第二個(gè)是一個(gè)通用的 Debug 函數(shù)(其實(shí) 說‘對(duì)象'比較‘精確些',呵呵),用來規(guī)定各種錯(cuò)誤級(jí)別及其各種提示、錯(cuò)誤信息的格式化顯示,還是《Javascript 實(shí)戰(zhàn)》上面的經(jīng)典例子,先看源碼:
/**
* 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.(這個(gè)函數(shù)用來遍歷對(duì)象的屬性及其相應(yīng)的值,并顯示出來)
*
* @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.(這是一個(gè)簡(jiǎn)單的 debug 日志記錄系統(tǒng))
*/
jscript.debug.DivLogger = function() {
/**
* The following are faux constants that define the various levels a log
* instance can be set to output.(下面的常量用來定義錯(cuò)誤級(jí)別)
*/
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.(定義各種錯(cuò)誤的顯示顏色)
*/
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.(需要顯示的最小錯(cuò)誤級(jí)別,默認(rèn)為 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.
*(在這里定義需要顯示的最小錯(cuò)誤級(jí)別)
* @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.(設(shè)置信息顯示的 DIV,調(diào)用此函數(shù)的時(shí)候,原有的信息將被清除)
*
* @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.(此函數(shù)用來判定現(xiàn)有的錯(cuò)誤級(jí)別是否應(yīng)該被顯示)
*
* @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 的錯(cuò)誤級(jí)別信息,往依此類推)
* @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().
源碼看完后,我們來測(cè)試一下這個(gè)“小包”,來看下面的測(cè)試源碼:
<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(顯示此鏈接標(biāo)簽對(duì)象的所有屬性和值)
</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>
上面的測(cè)試代碼里面的 <script> 段進(jìn)行了 debug 的實(shí)例化,設(shè)置了顯示信息的 DIV,而且設(shè)置了顯示信息的最小級(jí)別為:LEVEL_DEBUG:
var log = new jscript.debug.DivLogger();
log.setTargetDiv(document.getElementById("divLog"));
log.setLevel(log.LEVEL_DEBUG);
來看看效果如何呢:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
在點(diǎn)擊“enumProps()-Shows all ……”(第一個(gè) link )的時(shí)候?yàn)g覽器彈出的框如下圖所示(Opera),詳細(xì)地列出了你所點(diǎn)擊的 a 標(biāo)簽對(duì)象的所有屬性及值:
復(fù)制代碼 代碼如下:
/**
* 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.(這個(gè)函數(shù)用來遍歷對(duì)象的屬性及其相應(yīng)的值,并顯示出來)
*
* @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.(這是一個(gè)簡(jiǎn)單的 debug 日志記錄系統(tǒng))
*/
jscript.debug.DivLogger = function() {
/**
* The following are faux constants that define the various levels a log
* instance can be set to output.(下面的常量用來定義錯(cuò)誤級(jí)別)
*/
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.(定義各種錯(cuò)誤的顯示顏色)
*/
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.(需要顯示的最小錯(cuò)誤級(jí)別,默認(rèn)為 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.
*(在這里定義需要顯示的最小錯(cuò)誤級(jí)別)
* @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.(設(shè)置信息顯示的 DIV,調(diào)用此函數(shù)的時(shí)候,原有的信息將被清除)
*
* @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.(此函數(shù)用來判定現(xiàn)有的錯(cuò)誤級(jí)別是否應(yīng)該被顯示)
*
* @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 的錯(cuò)誤級(jí)別信息,往依此類推)
* @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().
源碼看完后,我們來測(cè)試一下這個(gè)“小包”,來看下面的測(cè)試源碼:
復(fù)制代碼 代碼如下:
<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(顯示此鏈接標(biāo)簽對(duì)象的所有屬性和值)
</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>
上面的測(cè)試代碼里面的 <script> 段進(jìn)行了 debug 的實(shí)例化,設(shè)置了顯示信息的 DIV,而且設(shè)置了顯示信息的最小級(jí)別為:LEVEL_DEBUG:
var log = new jscript.debug.DivLogger();
log.setTargetDiv(document.getElementById("divLog"));
log.setLevel(log.LEVEL_DEBUG);
來看看效果如何呢:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
在點(diǎn)擊“enumProps()-Shows all ……”(第一個(gè) link )的時(shí)候?yàn)g覽器彈出的框如下圖所示(Opera),詳細(xì)地列出了你所點(diǎn)擊的 a 標(biāo)簽對(duì)象的所有屬性及值:
相關(guān)文章
JS+CSS實(shí)現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)模仿瀏覽器網(wǎng)頁字符查找功能的方法,實(shí)例分析了javascript實(shí)現(xiàn)查找功能的樣式及相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果
這篇文章主要為大家詳細(xì)介紹了JS仿京東移動(dòng)端手指撥動(dòng)切換輪播圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript中十種一步拷貝數(shù)組的方法實(shí)例詳解
JavaScript中我們經(jīng)常會(huì)遇到拷貝數(shù)組的場(chǎng)景,但是都有哪些方式能夠來實(shí)現(xiàn)呢,我們不妨來梳理一下,感興趣的朋友跟隨小編一起看看吧2019-04-04基于js實(shí)現(xiàn)的限制文本框只可以輸入數(shù)字
本文主要介紹了js限制文本框只可以輸入數(shù)字的實(shí)例代碼,可復(fù)制直接調(diào)用函數(shù)實(shí)現(xiàn)其功能。需要的朋友可以看下2016-12-12javascript實(shí)現(xiàn)獲取服務(wù)器時(shí)間
本文給大家總結(jié)了一下使用javascript來獲取服務(wù)器時(shí)間的幾種方法和思路,十分的簡(jiǎn)單明了,有需要的小伙伴可以參考下2015-05-05JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法
這篇文章主要介紹了JavaScript使用encodeURI()和decodeURI()獲取字符串值的方法,實(shí)例分析了encodeURI()和decodeURI()函數(shù)解析字符串的相關(guān)技巧,需要的朋友可以參考下2015-08-08