간단한 Javascript 디버깅 패키지인 jscript.debug.js를 살펴보겠습니다. 여기에는 두 가지 함수가 포함되어 있습니다. 첫 번째는 개체의 다양한 속성을 탐색하는 데 사용되며 두 번째는 일반적인 디버그 함수입니다(실제로는 'object'가 더 정확합니다.) ', 하하), 다양한 오류 수준과 다양한 프롬프트 및 오류 메시지의 형식화된 표시를 지정하는 데 사용되거나 "Javascript Practical Combat"의 전형적인 예를 먼저 살펴보세요. 소스 코드:
/**
* 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 + "
";
}
} // info() 끝.
/**
* 이 기능은 WARN 수준에서 메시지를 기록합니다.
*
* @param inMessage 기록할 메시지입니다.
*/
this.warn = function(inMessage) {
if (this.shouldBeLogged(this.LEVEL_WARN) && this.targetDiv) {
this.targetDiv.innerHTML =
"
"
"[WARN] " inMessage "
";
}
} // 경고()를 종료합니다.
/**
* 이 기능은 ERROR 수준에서 메시지를 기록합니다.
*
* @param inMessage 기록할 메시지입니다.
*/
this.error = function(inMessage) {
if (this.shouldBeLogged(this.LEVEL_ERROR) && this.targetDiv) {
this.targetDiv.innerHTML =
"
"
"[ERROR] " inMessage "
";
}
} // 오류 종료() .
/**
* 이 기능은 FATAL 수준의 메시지를 기록합니다.
*
* @param inMessage 기록할 메시지입니다.
*/
this.fatal = function(inMessage) {
if (this.shouldBeLogged(this.LEVEL_FATAL) && this.targetDiv) {
this.targetDiv.innerHTML =
"
"
"[FATAL] " inMessage "
"; >}
} // fatal() 종료.
} // DivLogger() 종료
";
}
} // End trace().
this.debug = function(inMessage) {
if (this.shouldBeLogged(this.LEVEL_DEBUG) && this.targetDiv) {
this.targetDiv.innerHTML +=
"
";
}
} // End debug().
this.info = function(inMessage) {
if (this.shouldBeLogged(this.LEVEL_INFO) && this.targetDiv) {
this.targetDiv.innerHTML +=
"
";
}
} // End info().
this.warn = function(inMessage) {
if (this.shouldBeLogged(this.LEVEL_WARN) && this.targetDiv) {
this.targetDiv.innerHTML +=
"
";
}
} // End warn().
this.error = function(inMessage) {
if (this.shouldBeLogged(this.LEVEL_ERROR) && this.targetDiv) {
this.targetDiv.innerHTML +=
"
";
}
} // End error().
this.fatal = function(inMessage) {
if (this.shouldBeLogged(this.LEVEL_FATAL) && this.targetDiv) {
this.targetDiv.innerHTML +=
"
";
}
} // End fatal().
} // End DivLogger().
// ]]> 클릭 "enumProps() -모두 표시..."(첫 번째 링크), 브라우저는 클릭한 태그 객체의 모든 속성과 값을 자세히 나열하는 아래와 같은 상자(Opera)를 팝업으로 표시합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
