シンプルな Javascript デバッグ パッケージのデバッグ package_javascript スキル

単純な Javascript デバッグ パッケージ jscript.debug.js を見てみましょう。これには 2 つの関数が含まれています。1 つ目はオブジェクトのさまざまなプロパティを調べるために使用され、2 つ目は一般的な Debug 関数です (実際には、「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 "

";
}

} // warn() を終了します。

/**
* この関数はメッセージを 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('Were tracing around now');">
DivLogger.log.trace() - 上記の DIV に TRACE メッセージを追加してみます
(次の理由で機能しません)指定された DEBUG レベル未満です);


onClick="log.debug('うーん、デバッグをしてみましょう');">
DivLogger.log.debug() - 上記の DIV に DEBUG メッセージを追加してみます


onClick="log.info('参考までに');">
DivLogger.log.info() - 上記の DIV に INFO メッセージを追加します


onClick="log.warn('警告! ロビンソンに危険が及びます!');" >
DivLogger.log.warn() - 上記の DIV に WARN メッセージを追加します


onClick="log.error('デイブ、AE-35 モジュールにエラーがあります');">
DivLogger.log.error() - 上記の DIV にエラー メッセージを追加します


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);"> enumProps() - このリンクのすべてのプロパティを表示します (このリンク ラベル オブジェクトのすべてのプロパティと値を表示します) </a> <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> DivLogger.log.trace() - 上記の DIV に TRACE メッセージを追加してみます (指定された DEBUG レベルを下回っているため動作しません); <a onclick="log.debug('Hmm, lets do some debugging');" href="javascript:void(0);"> </a> DivLogger.log.debug() - 上記の DIV に DEBUG メッセージを追加してみます <a onclick="log.info('Just for your information');" href="javascript:void(0);"> </a> DivLogger.log.info() - 上記の DIV に INFO メッセージを追加します。 <a onclick="log.warn('Warning! Danger Will Robinson!');" href="javascript:void(0);"> </a> DivLogger.log.warn() - 上記の DIV に WARN メッセージを追加します <a onclick="log.error('Dave, there is an error in the AE-35 module');" href="javascript:void(0);"> </a> DivLogger.log.error() - 上記の DIV に ERROR メッセージを追加します。 <a onclick="log.fatal('Game over man, game over!!');" href="javascript:void(0);"> </a> DivLogger.log.fatal() - 上記の DIV に FATAL メッセージを追加します </div> </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">[Ctrl A すべて選択 注: </a>外部 Js を導入する必要がある場合は、更新して実行する必要があります </div>]<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 + ""; } } // 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>クリック「enumProps() -Shows all...」(最初のリンク) を実行すると、ブラウザは以下に示すようなボックス (Opera) をポップアップ表示します。このボックスには、クリックしたタグ オブジェクトのすべての属性と値が詳細にリストされます。