更新日: 2007/12/23 無限の創造性、シンプルかつ実践的 (JavaScript ログ)_JavaScript スキル

JavaScript の開発プロセスで、常にアラート メソッドを使用してプログラムをデバッグする場合、一部の単純なプログラムでは実行可能ですが、非常に複雑な通常のプロジェクトでは、この方法で満足することはすでに困難です。エンタープライズレベルの開発ニーズを満たすのは困難です。
たとえば、ajax プロジェクトには、約 3,000 行の JS ファイルがあり、その中にはさまざまなカスタマイズされた JavaScript オブジェクトが含まれています。
開発プロセスでは、js プログラムが特定のキーポイントに達したときに、カスタムオブジェクトの値や状態を常に監視する必要があります。
実行結果が期待通りであるかどうかをアラートで判断します。値を特定のオブジェクトに関連付けることは困難です。
次の 2 つの明らかな欠点があります:
1. いつでも監視したい実行内に n 個のキー ポイントがある場合、アラートを使用すると確認のために n 回クリックする必要がなくなります。非常に支離滅裂で直感的ではなく、深く隠れた問題をスムーズに発見するのは困難です。
2. デバッグに使用したアラート ステートメントは、公開時に削除する必要があります。いつか再度デバッグする必要がある場合、前のキー ポイントを思い出してアラートを追加する必要があり、デバッグが困難です。
このツールを使用すると、上記の 2 つの問題は簡単に解決されます。
上記のニーズを考慮して、私はシンプルさと実用性の原則に基づいて、この JavaScript デバッグ ツールを自分で書きました。プログラム全体はわずか約 300kb です。
このツールには主に次の機能があります:
1. 完全にプラグイン可能で、ターゲット プログラムに悪影響を及ぼしません。
2. 使用方法は簡単で便利です。JS コードを 1 行導入するだけです。
これを使用すると、JS プログラムのデバッグがより便利になることがわかります。

//----------------------使用方法----- - --------------------------------------//
ステップ 1. ダウンロード後JSDebugTool.zip を次のような任意のディレクトリに解凍します。 D:toolsJSDebugTool
ステップ 2. 次のような JS コード行をターゲット プログラム (JSP、ASP、HTML、PHP など) に追加します。

debug=true/false
true : Javascript デバッグ機能がオン (開発時) false : Javascript デバッグ機能がオフ (リリース時)
"debug" パラメータが設定されていない場合、デフォルト値は true です。
src 属性は (絶対パス、相対パス、WEB パスなど) に設定できます。 debugInner.file: 埋め込みを使用します。 mode mode
showtime=true/false
true: 各デバッグ メッセージの前 現在の時刻を表示します。 false : 現在時刻を表示せず、デバッグ情報のみを表示します。
「showtime」パラメータが設定されていない場合、デフォルトは false です。
url 属性には、http://www.baidu.com などのターゲット ページの URL を指定できます。
- url パラメータが設定されると、その URL が指す Web ページの innerHTML が targetpage div


に追加されます。 ステップ 3. テスト コードは次のとおりです。








プロジェクトが大規模な場合、常にプログラム内にデバッグ情報を保持し、必要に応じてデバッグする必要があります。
したがって、重要な情報をいつでも出力できるようにすることも重要ですが、同時に、リリース後の対象スクリプトの実行パフォーマンスに影響を与えないようにすることも考慮する必要があります。
このツールが提供する印刷インターフェイスは次のとおりです: jslog(msg,color);//msg: メッセージの色: メッセージの色
実行中にターゲット プログラムの JS に「ステップ 2」を追加する場合削除を解除するか、プログラム内のメソッドをランダムな名前で再構築することもできます。例:
function out(msg,color){
if(jslog) jslog(msg,color); 🎜 >独自に定義したメソッドを一律に使用することもできます。例:
function test(){
out(null,"red");//null
out(1/3,"red") ); //数値
out(1==2,"red");//ブール値
out(test,"blue");//関数
out("hello world!"," red" );//string
}

ただし、一般的にリリース時には、デバッグ スイッチは debug=false に設定されます。ターゲット プログラム内のデバッグ コードを削除する必要はありません。ターゲット JS プログラムの実行パフォーマンスには影響しません。再度デバッグする必要がある場合は、デバッグ スイッチを

//---- に設定するだけです。 ---------- -------------最新のダウンロード ------------------- ---------------- ----//

ダウンロード (2007/12/23 更新): http://www.box.net/shared /bc3s1hdkw0

//----- ------------------------更新再開------ -------------------- -------------------//

2007/12/ 23 更新: (現在 15K)
1. jslog 統合管理で内部イベントを実行します。内部テスト段階では、「イベント登録のキャンセル」をテストするためのインターフェイスが残ります。コンソールをダブルクリックして呼び出すことができます。 > 2. debugInner ページのレイアウト調整。debugInner のコンソールをフローティング、ドラッグ可能、幅調整可能にします。コンソールの上部と左側の 40 未満の部分をドラッグできます。
注: シンプルで実用的であることを望みますが、肥大化するのは好みません。今後、debugInner のみが更新され、debugPopup は更新されなくなります