Rumah > hujung hadapan web > tutorial js > 简易 Javascript 调试包 Debug包_javascript技巧

简易 Javascript 调试包 Debug包_javascript技巧

WBOY
Lepaskan: 2016-05-16 18:17:41
asal
936 orang telah melayarinya

来看一个简易的 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 +=
"
" +
"[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().

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

复制代码 代码如下:

上面的测试代码里面的 <script> 段进行了 debug 的实例化,设置了显示信息的 DIV,而且设置了显示信息的最小级别为:LEVEL_DEBUG: <BR>var log = new jscript.debug.DivLogger(); <BR>log.setTargetDiv(document.getElementById("divLog")); <BR>log.setLevel(log.LEVEL_DEBUG); <BR>来看看效果如何呢: <BR><div class="htmlarea"><TEXTAREA id="runcode52315"> <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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
在点击“enumProps()-Shows all ……”(第一个 link )的时候浏览器弹出的框如下图所示(Opera),详细地列出了你所点击的 a 标签对象的所有属性及值:
Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan