Simple and practical js debugging logger component implementation code_javascript skills

But both methods have their limitations. The alert will be interrupted. Sometimes the value from the alert is not reliable. Using alert during closure may result in incorrect values. The debugger is actually quite confusing to use, as it is only supported by IE. Therefore, the most reasonable way is to use js to output the values ​​that need to be debugged during the running process to the page, or to write them to cookies. This method will not cause the problem of incorrect values ​​caused by alert interrupts, and will not be restricted by browser types. , the only troubling thing is that it is very troublesome to operate.
So, we have the js component mentioned below. The implementation of this component refers to the recording method of the log4net component. We use the logger component of this js to perform your debugging work in the form of log output.

Copy code The code is as follows:

/*
js debugging component
* /
(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_WARN = 2;
logger.LEVEL_ERROR = 3;
logger.LEVEL_FATAL = 4;
logger.VIEW_TYPE_ALERT = 0;
logger.VIEW_TYPE_APPEND = 1;
logger.prototype = {
setLevel: function (level) {
this.level = 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);
},
info: function (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"));
}
}
}
};
if (typeof window. Logger == 'undefined' || window.Logger == null)
window.Logger = new logger(logger.LEVEL_DEBUG, null, logger.VIEW_TYPE_APPEND);
})();

How to use it?
This js component registers the Logger object with the window object. We can use Logger.log/Logger.debug/Logger.info/Logger.warn/Logger.error/Logger.fatal to output different debugging information.
The sample code is as follows:

Copy the code The code is as follows:

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

It’s very simple. You no longer need to write document.getElementId().innerHtml everywhere. Or alert/debugger to output the content.
The addHours used in the sample code is the Date object method that I extended js. Friends who want to know more can check out "Extending the Date Method of js".