Simple and practical js debugging logger component implementation code _ javascript tips-js tutorial

Debugging js components during development is always troublesome. The most common method is to use alert or debugger to test the js running status. However, both methods have their own limitations. alert may interrupt, sometimes the values of alert may be unreliable, and the values of alert may be incorrect when you use the closure. Debugger is actually quite difficult to use, and only supports ie. Therefore, the most reasonable method is to output the value to be debugged during the running process to the page, or write the value to the cookie. This method does not cause the Value Mismatch caused by alert interruption, it will not be limited by the browser type, and the only thing that is entangled is that the operation is very troublesome.
Therefore, we have the js component described below. The implementation of this component refers to the logging method of the log4net component. We can use this js logger component to debug your work using the log output method.

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 a Logger object to the window object. We can use Logger. log/Logger. debug/logger.info/logger.warn/logger.error/logger.fatalto output different shard information.
The sample code is as follows:

The Code is as follows:

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

It's easy. You no longer need to write document. getElementId (). innerHtml or alert/debugger everywhere to output the content.
The addHours used in the sample code is the Date object method for js extension. If you want to know more, you can refer to "Date method for js extension".