シンプルで実用的なjsデバッグロガーコンポーネント実装コード_javascriptスキル

ただし、どちらの方法にも制限があり、アラートの値が信頼できない場合があります。デバッガーは IE でのみサポートされているため、実際には使用するのが非常にわかりにくいです。したがって、実行プロセス中にデバッグが必要な値を js を使用してページに出力するか、Cookie に書き込むことが最も合理的な方法です。この方法では、エラーによる値の誤りの問題は発生しません。アラートは中断されますが、ブラウザの種類に制限されません。唯一の問題は、操作が非常に面倒なことです。
それで、以下に示す js コンポーネントができました。このコンポーネントの実装は、log4net コンポーネントの記録メソッドを参照します。この js のロガー コンポーネントを使用して、ログ出力の形式でデバッグ作業を実行します。

コードをコピー コードは次のとおりです:

/*
js デバッグ コンポーネント
* /
(function () {
var logger = function (level, object, viewType) {
this.level = level;
this.object = object;
this. ;
logger.LEVEL_INFO = 1;
logger.LEVEL_ERROR = 3; = 4;
logger.VIEW_TYPE_ALERT = 0;
logger.prototype = {
setLevel: 関数 (レベル) {
this.level = レベル; >},
setObject: function (o) {
if (typeof o == 'string') {
this.object = document.getElementById(o); else {
this.object = o;
}
},
setViewType: function (type) {
this.viewType = type;
log: function (s) 🎜>this .message(100, s);
},
debug: function (s) {
this.message(logger.LEVEL_DEBUG, s);関数 (s) ) {
this.message(logger.LEVEL_INFO, s);
},
warn: function (s) {
this.message(logger.LEVEL_WARN, s); 🎜>},
error: function (s) {
this.message(logger.LEVEL_ERROR, s);
},
fatal: function (s) {
this.message( logger.LEVEL_FATAL, s);
},
message: function (level, s) {
if (level >= this.level) {
if (this.object != null) {
this.object.innerHTML = s;
} else if (this.viewType == logger.VIEW_TYPE_ALERT) {
alert(s);
} else {
document.body. appendChild(document.createTextNode(s));
document.body.appendChild(document.createElement("br"));
}
}
}; (typeof window.Logger == '未定義' || window.Logger == null)
window.Logger = new logger(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_APPEND)(); >

使い方は？
この JS コンポーネントは、Logger オブジェクトを window オブジェクトに登録します。Logger.log/Logger.debug/Logger.info/Logger.warn/Logger.error/Logger.fatal を使用して、さまざまなデバッグ情報を出力できます。
サンプル コードは次のとおりです:




コードをコピーします


コードは次のとおりです:


Logger.debug(new Date());
Logger.debug(new Date().addHours(3));

ドキュメントを書く必要はもうありません。どこでも .getElementId().innerHtml またはアラート/デバッガーでコンテンツを出力します。
サンプル コードで使用されている addHours は、私が js を拡張した Date オブジェクト メソッドです。詳しく知りたい方は、「JS の Date メソッドを拡張する」を参照してください。