Heim > Web-Frontend > js-Tutorial > 简易 Javascript 调试包 Debug包_javascript技巧

简易 Javascript 调试包 Debug包_javascript技巧

WBOY
Freigeben: 2016-05-16 18:17:41
Original
936 Leute haben es durchsucht

来看一个简易的 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 标签对象的所有属性及值:
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage