간단한 Javascript 디버깅 패키지 Debug package_javascript 기술

간단한 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() 종료

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

复代码 代码如下:

onClick="jscript.debug.enumProps(document.getElementById('enumPropsLink) '));">
enumProps()-이 링크의 모든 속성을 표시합니다(显示此链接标签对象的所有属性和值)


< br>

로그 메시지가 여기에 표시됩니다

<script> <br>var log = new jscript.debug.DivLogger(); <br>log.setTargetDiv(document.getElementById(" divLog")); <br>log.setLevel(log.LEVEL_DEBUG); <br></script>


onClick="log.trace('지금 추적 중입니다.');">
DivLogger.log.trace() - 위 DIV에 TRACE 메시지를 추가해 보세요.
(작동하지 않음) 지정된 DEBUG 수준보다 낮음);


onClick="log.debug('흠, 디버깅을 해보자');">
DivLogger.log.debug() - 위의 DIV


onClick="log.info('Just for your information');">
DivLogger.log.info() - 위 DIV에 INFO 메시지를 추가합니다.


onClick="log.warn('경고! 위험합니다. 윌 로빈슨!');" >
DivLogger.log.warn() - 위 DIV에 WARN 메시지를 추가합니다.


onClick="log.error('데이브, AE-35 모듈에 오류가 있습니다.');">
DivLogger.log.error() - 위 DIV에 ERROR 메시지를 추가합니다.


onClick="log.fatal('게임 오버, 게임 오버!!');">
DivLogger.log.fatal() - 위 DIV에 FATAL 메시지를 추가합니다.

위 테스트 코드의 <script> 섹션은 디버그를 위해 인스턴스화되고 정보 표시를 위한 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"> <div id="jscript_debug_div" style="font-family: arial; font-size: 10pt; font-weight: bold; background-color: #ffffe0; padding: 4px;"> <a id="enumPropsLink" onclick="jscript.debug.enumProps(document.getElementById('enumPropsLink'));" href="javascript:void(0);"> </a> enumProps()-이 링크의 모든 속성을 표시합니다(이 링크 레이블 개체의 모든 속성과 값을 표시합니다). <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;"> </div>여기에 로그 메시지가 표시됩니다<a onclick="log.trace('Were tracing along now');" href="javascript:void(0);"> </a> <a onclick="log.debug('Hmm, lets do some debugging');" href="javascript:void(0);"> DivLogger.log.trace() - 위 DIV에 TRACE 메시지를 추가해 보세요. (지정된 DEBUG 수준보다 낮기 때문에 작동하지 않습니다); </a> <a onclick="log.info('Just for your information');" href="javascript:void(0);"> DivLogger.log.debug() - 위 DIV에 DEBUG 메시지를 추가해 보세요. </a> <a onclick="log.warn('Warning! Danger Will Robinson!');" href="javascript:void(0);"> DivLogger.log.info() - 위의 DIV에 INFO 메시지를 추가합니다. </a> <a onclick="log.error('Dave, there is an error in the AE-35 module');" href="javascript:void(0);"> DivLogger.log.warn() - 위 DIV에 WARN 메시지를 추가합니다. </a> <a onclick="log.fatal('Game over man, game over!!');" href="javascript:void(0);"> DivLogger.log.error() - 위 DIV에 ERROR 메시지를 추가합니다. </a> </div> DivLogger.log.fatal() - 위 DIV에 FATAL 메시지를 추가합니다. </textarea> <br> <input onclick="runEx('runcode52315')" type="button" value="运行代码"><input onclick="doCopy('runcode52315')" type="button" value="复制代码"><input onclick="doSave(runcode52315)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A 모두 선택 참고: </div>외부 J를 도입하려면 새로 고쳐야 실행됩니다. <br>]<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 + "</script>

"; } } // End trace(). this.debug = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_DEBUG) && this.targetDiv) { this.targetDiv.innerHTML += "

" + "[DEBUG] " + inMessage + "

"; } } // End debug(). this.info = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_INFO) && this.targetDiv) { this.targetDiv.innerHTML += "

" + "[INFO] " + inMessage + "

"; } } // End info(). this.warn = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_WARN) && this.targetDiv) { this.targetDiv.innerHTML += "

" + "[WARN] " + inMessage + "

"; } } // End warn(). this.error = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_ERROR) && this.targetDiv) { this.targetDiv.innerHTML += "

" + "[ERROR] " + inMessage + "

"; } } // End error(). this.fatal = function(inMessage) { if (this.shouldBeLogged(this.LEVEL_FATAL) && this.targetDiv) { this.targetDiv.innerHTML += "

" + "[FATAL] " + inMessage + "

"; } } // End fatal(). } // End DivLogger(). // ]]> 클릭 "enumProps() -모두 표시..."(첫 번째 링크), 브라우저는 클릭한 태그 객체의 모든 속성과 값을 자세히 나열하는 아래와 같은 상자(Opera)를 팝업으로 표시합니다.