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

単純な Javascript デバッグ パッケージ jscript.debug.js を見てみましょう。これには 2 つの関数が含まれています。1 つ目はオブジェクトのさまざまなプロパティを調べるために使用され、2 つ目は一般的な Debug 関数です (実際には、「object」の方が正確です)。 '、笑)、さまざまなエラー レベル、さまざまなプロンプトやエラー メッセージの書式設定された表示、または「Javascript Practical Combat」の古典的な例を指定するために使用されます。まずソース コードを確認します:

复制代


上記のテスト コードの <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) をポップアップ表示します。このボックスには、クリックしたタグ オブジェクトのすべての属性と値が詳細にリストされます。