간단하고 실용적인 js 디버깅 로거 구성 요소 구현 code_javascript 기술

그러나 두 가지 방법 모두 경고가 중단되는 경우가 있습니다. 종료 중에 경고를 사용하면 잘못된 값이 나타날 수 있습니다. 디버거는 IE에서만 지원되기 때문에 실제로 사용하기가 상당히 혼란스럽습니다. 따라서 가장 합리적인 방법은 js를 이용하여 실행과정에서 디버깅이 필요한 값을 페이지에 출력하거나, 쿠키에 기록하는 방법입니다. 경고는 중단되고 브라우저 유형에 의해 제한되지 않습니다. 유일한 문제는 작동이 매우 번거롭다는 것입니다.
아래에 언급된 js 구성 요소가 있습니다. 이 구성 요소의 구현은 log4net 구성 요소의 기록 방법을 참조하며 이 js의 logger 구성 요소를 사용하여 로그 출력 형식으로 디버깅 작업을 수행합니다.

코드 복사 코드는 다음과 같습니다.

/*
js 디버깅 구성 요소
* /
(function () {
var logger = function (level, object, viewType) {
this.level = level;
this.object = object;
this. viewType = viewType ;
logger.LEVEL_DEBUG = 0;
logger.LEVEL_INFO = 1;
logger.LEVEL_ERROR = 3; = 4;
logger.VIEW_TYPE_ALERT = 0;
logger.prototype = {
setLevel: 함수(레벨) {
this.level = 레벨; >},
setObject: 함수 (o) {
if (typeof o == 'string') {
this.object = document.getElementById(o)
} else {
this.object = o;
}
},
setViewType: 함수(유형) {
this.viewType = 유형;
},
log: 함수(들) {
this .message(100, s);
},
디버그: 함수(s) {
this.message(logger.LEVEL_DEBUG, s)
},
정보: 함수(들) ) {
this.message(logger.LEVEL_INFO, s);
},
경고: 함수(들) {
this.message(logger.LEVEL_WARN, s); 🎜>},
오류: 함수(들) {
this.message(logger.LEVEL_ERROR, s)
},
치명적: 함수(들) {
this.message( logger.LEVEL_FATAL, s)
},
메시지: function (level, s) {
if (level >= this.level) {
if (this.object != null) {
this.object.innerHTML = s;
} else if (this.viewType == logger.VIEW_TYPE_ALERT) {
경고
} else {
document.body. appendChild(document.createTextNode(s));
document.body.appendChild(document.createElement("br"))
}
}
}
}; (창 유형. 로거 == '정의되지 않음' || window.Logger == null)
window.Logger = 새 로거(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_APPEND)
})(); >

어떻게 사용하나요?
이 js 구성 요소는 Logger 개체를 창 개체에 등록합니다. 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 메서드 확장"을 확인하세요.