`
accpxudajian
  • 浏览: 459858 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JSLogger日志记录组件

阅读更多
 <html>    
<head>    
<script src="JSLogger.js" charset="UTF-8" config="width:500px;" debug="true"></script>    
</head>    
<body id="mybody">    
<input type="text" id="txt_log" value="请输入log内容"/>    
<input type="button" value="添加log" onclick="JSLogger.log(txt_log.value)" >    
<!--测试js-->    
<script>    
//打印存文本
JSLogger.log("启动正常");
//打印原生态html
JSLogger.logHTML("<div style='color:red;'>你好</div>");
//打印带有地址的信息:自动添加超链接
JSLogger.logURL("百度的地址是:http://www.baidu.com");
//打印js对象
var user={Name:"ab",Age:23,Teacher:{Name:"王老师",Grand:"4年纪"},Addrss:"北京市",School:{Name:"育新中雪",Address:"北京市海淀区30号",Tel:null}};    
JSLogger.log(user);  
//打印表单对象:
JSLogger.log(document.getElementById("txt_log"));  
</script>    
</body>    
</html>   

 

//2012.09.21 更新:
    
/*1.补充log方法,实现自动判断并打印XMLDOM对象。

    2.增加logXML方法,可以打印XML文档对象的全部内容,包括:子节点名称和节点的值,子节点的所有属性以及XML文档的所有数值。

    3.新增获取客户单信息的方法。大致包括: 客户端浏览器的类型,版本(version); 分辨率大小,当前窗口大小; IP、端口、web工程名称。

    4.完善initError方法。

    5.给window扩充log方法(实现JSLogger.log方法的简写)。

    6.样式完善等。
 
 对应rar包:JS操作XMLDOM.rar */
 


组件背景:
在项目开发工程中,经常要监控某一个变量的值,通常的情况下我们都使用alert弹出变量的值,但问题是发布的时候还需要逐个删除alert或者注释(我多半采取注释方法,方便再次使用),而随后还可能对发布的版本进行维护,可能还需要追踪变量的值,这样就再次使用alert。如此反复无常是人头疼。

JSLogger就是解决这个问题的。

主要用途:
1 用于打印信息。可用于记录变量值以及追踪多个方法的先后运行顺序。

特点:
1 是否追踪日志可配置。
2 IE,ff,chrome兼容。
3 log面板可关闭/打开,以及实时清空日志。
新增1:对象型数据记录log:打印一个Object类型数据Obj的属性。如果Obj的属性P仍是Object,继续打印P的所有属性。(只向下打印到二级属性,即对象.属性.属性)

新增2:打印DOM对象,并且属性按照A-Z,a-z排序。(IE不兼容,在chrome和ff下正常)

 

 

 

 

 

 

源码实例:

 

//alert("JSLogger");
var JSLogger=function(){
	this.divdom =document.createElement("div");//日志div的对象。
	return{
		init:function(){//初始化调试信息。
			var logObj = this;
			if(JSLogger.debug()==true){
				divdom.id="log_div_";//日志div的ID
				divdom.style.border="0px solid gray";/*边框颜不可变*/	
				divdom.style.padding="0px";/*不可变*/
				divdom.style.fontFamily="Arial";/*字体可变*/
				divdom.style.margin="0px";/*不可变*/
				divdom.style.background="white";/*可变*/
				divdom.style.width=(logObj.config.width || "300px");/*宽度可变*/
				divdom.style.height=(logObj.config.height || "300px");/*高度可变*/
				divdom.style.position="absolute";/*不可变*/
				divdom.style.fontSize="14";/*不可变*/
				divdom.style.textAlign="left";/*不可变*/
				divdom.style.zIndex=(9999*9999);/*控制日志组件在所有可用组件的上边*/
				if(!!logObj.config.top===true ){
					divdom.style.top = (parseInt(logObj.config.top) ||0)+"px";
				}else{
					divdom.style.bottom="0";/*不可变*/
				}
				var titleHTML = "";
				//左下角还是右下角
				if(typeof(logObj.config.pos)==="string" && (logObj.config.pos==="left")){
					divdom.style.left="0";/*不可变*/
					titleHTML = logObj.createTitle({});
				}else{
					divdom.style.right="0";/*不可变*/
					titleHTML = logObj.createTitle({});
				}
				divdom.style.overflow="hidden";/*不可变 不出现滚动条的关键。*/
				divdom.style.cursor="pointer";/*光标样式不可变*/
				divdom.innerHTML=titleHTML;
				document.body.appendChild(divdom);
				if(logObj.config.closed=="true"){
					logObj.hide(logObj.getById("close_open_label"));
				}
				
			}else{/*do nothing*/}
		},
		createTitle:function(config){//显示关闭和清除的div
			//var align = (typeof(config.align)==="string" && "left"===config.align)?"left":"right";//默认右下角
			var html = '<div style="text-align:right;background:red;overflow:hidden;height:20px;">'
			//关闭和打开按钮
			+'<font style="color:white;cursor:pointer ;" onselectstart="return false" id="close_open_label" state="true"  onmouseout="this.style.fontWeight=\'\'" onmouseover="this.style.fontWeight=\'bold\'" onclick="JSLogger.hide(this)">Close</font>'
			+'&nbsp;<font style="color:white;cursor:pointer;" onselectstart="return false" state="true" title="clear log message" onmouseout="this.style.fontWeight=\'\';" onmouseover="this.style.fontWeight=\'bold\'" onclick="JSLogger.clear()">Clear</font>'
			+'</div>'
			+'<div id="log_div_msg" style="background:white;border:1px solid red;width:100%;height:95%;overflow:auto;"></div>';//log_div_msg 用于加载日志信息。
			//+'<div style="background:white;border:1px solid red;width:100%;height:100px;">END</div>';
			return html;
		},
		clear:function(){//清空log信息
			this.getById("log_div_msg").innerHTML="";
		},
		hide:function(ADom){//隐藏和显示调试信息。
			var logObj = this;
			var state = ADom.getAttribute("state");
			if(state=="true"){
				divdom.style.width="32px";
				divdom.style.height="20px";
				divdom.style.background="red";
				ADom.setAttribute("state","false");
				logObj.getById("log_div_msg").style.display="none";
				logObj.getById("close_open_label").innerHTML="Open";
				
			}else{
				divdom.style.background="";
				divdom.style.height=(logObj.config.height || "300px");
				divdom.style.width=(logObj.config.width || "300px");/*宽度可变*/
				ADom.setAttribute("state","true");
				logObj.getById("log_div_msg").style.display="";
				logObj.getById("close_open_label").innerHTML="Close";
			}
		},
		debug:function(){//看是否启用调试 
			var logObj = this;
			var arr = document.getElementsByTagName("script");//.concat(top.document.getElementsByTagName("script"));
			var res=false;
			
			for(var i=0;i<arr.length;i++){
				var src = arr[i].getAttribute("src");
				if(null!=src){
					if(src.indexOf("/JSLogger.js")>=0 || "JSLogger.js"==src){
						var flag = arr[i].getAttribute("debug");
						if("true"==flag){
							//config="width=500px;open=true;"
							var config = arr[i].getAttribute("config") || "";
							if(!!config===true){
								logObj.config = logObj.toJSON(config);
							}
							res=true;
							break;
						}

					}
				}
			}
			//logObj.debug =  function(){return res;}
			return res;
		},
		toJSON:function(str){
			var json = {};
			str = str.replace(/,/g,";");//兼容使用;号 和 使用,号进行JSON标记
			var arr = str.split(";");
			for(var i=0;i<arr.length;i++){
				var v= arr[i].split(":");
				if(!!arr[i]===false ||v.length!=2 ){
					continue;
				}
				json[v[0]] = v[1];
			}
			return json;
		},
		loadLog:function(){//加载完毕后执行的方法
			var logObj = this;
			if(window.attachEvent){
				document.onreadystatechange = function(){   
					if(document.readyState=="complete"){   
						logObj.init();
						//alert('IE浏览器加载完毕'); 
					} 
			} 
			}else{
				document.addEventListener("DOMContentLoaded",function(){
					logObj.init();
					//alert("火狐浏览器加载完毕");
				},false);
			}

		},sort:function(dom){
			var arr = [];

			for(var i in dom){
				arr.push(i);
			}
			return arr.sort();
		
		},logHTML:function(ahtml){
			var logObj = this;
			var v = ahtml.replace(/</g,"&lt;").replace(/>/g,"&gt;");
			logObj.log(v);
		},logURL:function(ahtml){
			var logObj = this;

			var url = ahtml;
			var before = url.replace(/https{0,1}:\/\/.{1,}/,"");
			var _url = url.split(before)[1];
			var v = _url.replace(/</g,"&lt;").replace(/>/g,"&gt;")
			var res = before+"<a href="+v+" target='_blank'>"+v+"</a>";
			logObj.log(res);
		},
		logXML:function(xmlDOM){//打印XML文档对象的全部文本内容
			var logObj = this;
			logObj.logHTML(logObj.getXML(xmlDOM.childNodes[0]));
		},
		getXML:function(xmlDOM){//循环获取XML对象中的属性和值
			var logObj = this;

			var v ="";
			var firstChild = xmlDOM;
			while(firstChild!=null){
				//log(firstChild.nodeName);
				if("#comment"==firstChild.nodeName){
					v += ("<--"+firstChild.nodeValue+"-->");
					firstChild = firstChild.nextSibling;
					continue;
				}
				v += ("<"+firstChild.nodeName+"");
				var attr =  firstChild.attributes||[];
				if(attr.length>0){
					for(var j=0;j<attr.length;j++){
						v +=(" "+attr[0].nodeName+"= \""+attr[0].nodeValue+"\"");
					}
				}
				for(var j=0;j<attr.length;j++){
					v += (attr[j]);
				}
				v +=">";
				//log(firstChild.firstChild.nodeName);
				if("#text"!=firstChild.firstChild.nodeName){
					var sonFirstChild = firstChild.childNodes[0];
					v += logObj.getXML(sonFirstChild);
				}else{
					v += (firstChild.childNodes[0].nodeValue);
				}
				v += ("</"+firstChild.nodeName+">");
				firstChild = firstChild.nextSibling;
			}
			return v;
		},
		getXMLJSON:function(xmlDOM){//获取XML DOM对象的结构
			//JSLogger.log("xmlDOM.nodeName = "+xmlDOM.nodeName);
			var arr = [];
			if("#document"!=xmlDOM.nodeName){
				//根节点属性
				var attr =  xmlDOM.attributes||[];
				var _v = "";
				if(attr.length>0){
					_v = "[";
					for(var j=0;j<attr.length;j++){
						_v +=(""+attr[0].nodeName+"= \""+attr[0].nodeValue+"\" ");
					}
					_v += "]";
				}
				arr.push("+"+ xmlDOM.nodeName+_v+":【XMLDOM】"+"<br/>");//根节点属性END


				//根节点所有子节点
				var childs = xmlDOM.childNodes;
				for(var i=0;i<childs.length;i++){
					if(childs[i].nodeType==1){//其他节点不打印
						var first = childs[i];
						var attr =  first.attributes||[];//子节点属性
						_v = "";
						//子节点属性
						if(attr.length>0){
							_v = "[";
							for(var j=0;j<attr.length;j++){
								_v +=(" "+attr[0].nodeName+"= \""+attr[0].nodeValue+"\"");
							}
							_v += "]";
						}
						//自己点的值
						if( "#text" == first.firstChild.nodeName){//没有子节点
							arr.push("--"+first.nodeName+_v+"="+first.firstChild.nodeValue+"<br/>");
						}else{
							arr.push("--"+first.nodeName+_v+"=【XMLDOM】0="+first.firstChild.nodeName+"<br/>");
						}

						//arr.push("--"+ childs[i].nodeName+":"+childs[i].childNodes[0].nodeValue+"<br/>");
					}
				}
				arr.sort();
				return arr.join("");
			}
			var childs = xmlDOM.childNodes;
			var len = childs.length;
			for(var i=0;i<len;i++){
				var first = childs[0].firstChild;
				var attr =  childs[0].attributes||[];
				var _v = "";
				if(attr.length>0){
					_v = "[";
					for(var j=0;j<attr.length;j++){
						_v +=(""+attr[0].nodeName+"= \""+attr[0].nodeValue+"\" ");
					}
					_v += "]";
				}
				arr.push("+"+ childs[0].nodeName+_v+":【XMLDOM】"+"<br/>");

				while(first!=null){		
					//JSLogger.log(first.nodeType);
					if( first.nodeType!=1){//只要有效类型的节点
						first = first.nextSibling;
						continue;
					}
					attr =  first.attributes ||[];
					_v = "";
					if(attr.length>0){
						_v = "[";
						for(var j=0;j<attr.length;j++){
							_v +=(" "+attr[0].nodeName+"= \""+attr[0].nodeValue+"\"");
						}
						_v += "]";
					}

					if( "#text" == first.firstChild.nodeName){//没有子节点
						arr.push("--"+first.nodeName+_v+"="+first.firstChild.nodeValue+"<br/>");
					}else{
						arr.push("--"+first.nodeName+_v+"=【XMLDOM】<br/>");
					}
					first = first.nextSibling;
				}
			}
			arr.sort();

			return arr.join("");
		
		},logColor:function(text,color){
			var logObj = this;
			color = color || "";
			logObj.log("<div style='color:"+color+"'>"+text+"</div>");
		},getById:function(id){
			return document.getElementById(id);
		},error:function(v){
			var logObj = this;
			logObj.log("<span style='color:red'>【error】</span>"+v+"");
			logObj.getById("close_open_label").innerHTML="<span id='log_error_span'>Error</span>";
			var span =  logObj.getById("log_error_span").parentNode.parentNode;
			var counter = 0,preBgColor = span.style.backgroundColor ;
			var logInterval  = setInterval(function(){
				if((counter++)%2==0){
					span.style.backgroundColor = "yellow"; 
				}else{span.style.backgroundColor = "red"; }
			},100);
			setTimeout(function(){
				clearInterval(logInterval);
				span.style.backgroundColor = preBgColor; 
			},5000);
		},log:function(msg,s_b,s_likeV){//msg 打印的信息或者对象,likeV属性名称相似的条件,b是否打印对象的子项的内容
			var logObj = this;
			setTimeout(function(){
				if(JSLogger.debug()!=true){return;}
				//if(msg instanceof Object){//记录的信息为对象类型
				if(null==msg){msg="null";}//null值处理
				var b = (typeof(s_b)=="boolean"?s_b:typeof(s_likeV)==="boolean"?s_likeV:false);//默认为false
				var likeV = (typeof(s_b)=="string"?s_b:typeof(s_likeV)==="string"?s_likeV:"");//默认为“”
				likeV = likeV.toLowerCase();//统一转成小写
				//alert("b = "+b+",likeV = "+likeV)
				if( typeof(msg)=='object'){
					//alert("对象性数据");
					var html="【object】:<br/>";
					
					if(("getAttribute" in msg) && ("innerHTML" in msg)){
						//alert("DOM对象")
						var arr = logObj.sort(msg);
						html="【object】:共"+arr.length+"属性<br/>";
						//alert(arr)
						for(var i=0;i<arr.length;i++){
							var name =  arr[i];
							//属性条件过滤
							
							if(""!==likeV && name.toLowerCase().indexOf(likeV)==-1){
								continue;
							}
							var v = msg[name];
							//v是字符类型的数据,直接累加。
							if(typeof(v)=="function"){
								html+=("+"+name+"=【function】<br/>");
								continue;
							}
							if(typeof(v)=="object"){
								html+=("+"+name+"=【object】<br/>");
								continue;
							}
							if(typeof(v)=="string"){
								v = v.replace(/</g,"&lt;").replace(/>/g,"&gt;");
							}
							
							html+=("--"+name+"="+v+"<br/>");
						}
					}else if((typeof msg.childNodes) && ("nodeName" in msg)){//打印XML DOM对象的主体结构
						//JSLogger.log("XML DOM对象");
						html = logObj.getXMLJSON(msg);//结构
					}else{
							//JS的Object对象
							JSLogger.log("JS对象")
							var arrPs = logObj.sort(msg);							
							html="【object】:共"+arrPs.length+"属性<br/>";
							for(var i=0;i<arrPs.length;i++){
								var name = arrPs[i];
								//属性条件过滤
								if(""!==likeV && name.toLowerCase().indexOf(likeV)==-1){
									continue;
								}
								var v = msg[name];
								if(v!=null && typeof(v)=='object'){
								//if(v!=null && (v instanceof Object)){
									//v是对象类型的数据,不直接累加。
									html+=("+"+name+"=【object】:<br/>");
									//加载一级子项。
									if(b==true){
										for(var sonName in v){
											html+=("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--"+sonName+"="+v[sonName]+"<br/>");
										}
									}
									
								}else if(v!=null && (typeof(v)=='object'||typeof(v)=='function')){
									//加载一级子项。
									if(b==true){
										html+=("--"+name+"="+v+"<br/>");
									}else{
										html+=("+"+name+"=【function】:<br/>");
									}
								}else{
									//v是字符类型的数据,直接累加。
									if(typeof(v)=="string"){
										v = v.replace(/</g,"&lt;").replace(/>/g,"&gt;");
									}
									
									html+=("--"+name+"="+v+"<br/>");
								}
							}
					}
					logObj.getById("log_div_msg").innerHTML+=("<div style='word-wrap:break-word; word-break:break-all;background:white;list-style:none;padding:0p;margin:0px;border-bottom:1px dotted gray;width:100%;'>"+html+"</div>");	
				}else{
					//msg = msg.replace(/</g,"&lt;").replace(/>/g,"&gt;");
					logObj.getById("log_div_msg").innerHTML+=("<div style='word-wrap:break-word; word-break:break-all;background:white;list-style:none;padding:0p;margin:0px;border-bottom:1px dotted gray;width:100%;'>"+msg+"</div>");	
				}
			},100)
						
		},
		/*
		 * 报错处理
		 * **/
		initError:function(window){
			window.onerror= function(sMessage,sUrl,sLine){
				sMessage = sMessage ||"";
				sUrl =  sUrl ||"";
				sUrl = sUrl.substring(sUrl.lastIndexOf("/")+1,sUrl.length);
				sLine = sLine||"";
				
				var v = (sUrl+"第"+sLine+"行:"+sMessage);
				if(JSLogger){
					JSLogger.logColor(v,"red");
				}else if(top.JSLogger){
					top.JSLogger.logColor(v,"red");
				}
				return true;
			}
		}
	}//rturn end
}();

/*
* 工具类获取:
* 客户端浏览器的类型,版本(version)
* 分辨率大小,当前窗口大小
* IP、端口、web工程名称
* 
***/
var ClientInfo ={
	/**
	* 拷贝某一个JSON属性到当前对象
	*@param selfJSON 当前JSON对象
	*@param targetJSON 即将拷贝的JSON对象
	*@param override targetJSON属性是否覆盖selfJSON的属性
	**/
	copyJSON : function(selfJSON,targetJSON,override){
		if(!!selfJSON===false){return {};}
		targetJSON = targetJSON ||{};
		override = typeof(override)?override:true;
		for(var p in targetJSON){
			if(override===true){
				selfJSON[p] = targetJSON[p];
			}else{
				if((p in selfJSON)===false){
					selfJSON[p] = targetJSON[p];
				}
			}
		}
	},
	/**
	* 拷贝某一个JSON属性到当前对象
	*@param selfJSON 当前JSON对象
	*@param targetJSON 即将拷贝的JSON对象(如果数组的值是K:V形式,那么K是selfJSON属性显示名称,V是targetJSON属性的名称)
	*@param propArr 拷贝的属性数组
	*@param override targetJSON属性是否覆盖selfJSON的属性
	**/
	copyPros :function(selfJSON,targetObj,propArr,override){
		if(!!selfJSON===false){return {};}
		targetObj = targetObj ||{};
		propArr = propArr ||[];
		override = typeof(override)?override:true;

		for(var i=0;i<propArr.length;i++){
			var name = propArr[i].split(":")[0];//属性显示的名称
			var p = propArr[i].split(":")[1] ||name;//属性原始名称
			if(override===true){
				selfJSON[p] = targetObj[p];
			}else{
				if( ((p in selfJSON)===false) && ((p in targetObj)===true)){
					selfJSON[name] = targetObj[p];
				}
			}
		}
	},
	get:function(){
		var JSON = {};
		var url2 = window.location.href;//"http://172.16.115.34:8080/exchange/";
		var reg=/http:\/\/([^\/:]+)(:[0-9]+)?\/([^\/]+)/gi;
		var res = reg.test(url2);
		if(res==true){
			ClientInfo.copyJSON(JSON,{server:RegExp.$1,port:RegExp.$2,sitename:RegExp.$3},false);	
		}
		
		JSON.href=window.location.href;
		JSON.isIE = (navigator.userAgent.indexOf("MSIE")>=0);
		JSON.isFF = (navigator.userAgent.indexOf("Firefox")>=0);
		JSON.isChrome = (navigator.userAgent.indexOf("Chrome")>=0);
		if(JSON.isIE){
			JSON.version = (navigator.userAgent.split("MSIE")[1]).split(";")[0].replace(/ /,'');
		}
		if(JSON.isFF){
			JSON.version = (navigator.userAgent.split("Firefox/")[1]);
		}
		if(JSON.isChrome){
			JSON.version = (navigator.userAgent.split("Chrome/")[1]).split("Safari")[0].replace(/ /,'');
		}
		
		ClientInfo.copyPros(JSON,navigator,['userAgent','platform','language','userLanguage','cookieEnabled'],false);	
		ClientInfo.copyPros(JSON,window.screen,["screenWidth:availWidth","screenHeight:availHeight"],false);	
		ClientInfo.copyPros(JSON,window.document.body,["bodyWidth:clientWidth","bodyHeight:clientHeight"],false);	

		return JSON;
	}
}



JSLogger.loadLog();
JSLogger.initError(window);

if(typeof(window.log)=="undefined"){
	window.log = function(v){
		 JSLogger.log(v);
	}
}
if(typeof(window.logHTML)=="undefined"){
	window.logHTML = function(v){
		 JSLogger.logHTML(v);
	}
}
 

 

 

 

 

 

愤怒的JSER -- 写最干净的日志控件

  • 大小: 8.4 KB
  • 大小: 27.7 KB
分享到:
评论

相关推荐

    Logger日志文件查看

    "Logger日志文件查看"这一主题主要涉及如何有效查看和分析.log文件,以及可能用到的工具和技术。 1. **日志文件的格式与内容** 日志文件通常包含时间戳、事件级别(如调试、信息、警告、错误和致命错误)、源...

    简单实用的js调试logger组件实现代码

    这个logger组件的实现原理是参考了log4net这一日志记录组件。log4net是.NET平台下的一个流行日志框架,它具有多种日志级别和灵活的输出方式。借鉴log4net的思路,JavaScript的logger组件同样实现了不同级别的日志...

    关于自定义Egg.js的请求级别日志详解

    在探讨Egg.js框架的自定义请求级别日志之前,有必要对Egg.js本身做一个基础...通过深入理解Egg.js的logger组件以及它所依赖的第三方模块,开发者可以灵活地实现自定义的日志管理方案,提高业务应用的稳定性和可维护性。

    2o3t-Logger:一个简单的Nodejs日志工具。 一个简单的Node.js记录器

    2o3t记录仪 日志工具,可以打印日志 控制台输出 文件输出 在里面 const Logger = require ( '2o3t-logger' ) ; const logger = Logger . instance ( 'names' , { disabledFile : true , } ) ; // or const ...

    Node.js-concurrency-loggerHTTP日志中间件

    在Node.js中,`concurrency-logger`是一个非常有用的中间件,它专门设计用于处理HTTP请求与响应的记录、并发管理和日志报告。这个中间件的主要目标是帮助开发者更好地理解和调试应用程序中的并发问题,同时提供了一...

    log4js.7z

    随后,可以通过`log4js.getLogger()`获取logger实例,进行日志记录: ```javascript const logger = log4js.getLogger('myLogger'); logger.info('This is an info message'); ``` 4. **高级特性** - **多...

    前端项目-angular-simple-logger.zip

    【标题】"前端项目-angular-simple-logger.zip"指的是一个基于Angular框架的简单日志记录器项目,被封装在一个ZIP压缩文件中。这个项目主要用于在前端应用程序中实现轻量级的日志记录功能,帮助开发者追踪和调试应用...

    前端开源库-logger-app

    日志文件记录了系统、应用或服务的运行情况,包括错误信息、警告、调试信息等。有效的日志管理能帮助开发者追踪错误,理解系统行为,优化性能。"logger-app"通过Web UI远程访问日志,意味着它可以跨平台使用,无论你...

    Nodejs Express 通过log4js写日志到Logstash(ELK)

    然后,在`app.js`中,我们引入`log4js`和`logger.js`,并在需要的地方使用`logger.info()`, `logger.error()`等方法记录日志。 ```javascript var logger = require('./logs/logger.js'); ``` 对于日志的反向代理...

    log4javascript-1.3.1

    **日志记录在前端开发中的重要性** 在前端开发中,尤其是在复杂的业务场景下,调试JavaScript代码是一项挑战。浏览器的内置开发者工具虽然提供了强大的调试功能,但面对大规模、多模块的项目时,其局限性逐渐显现。...

    nestjs-universal-logger

    4. **Middleware Integration**:可以将日志中间件集成到 NestJS 应用中,实现全局的日志记录,覆盖所有路由请求。 5. **Stream-Based Logging**:支持将日志输出到不同的流,比如控制台、文件或者远程服务器,便于...

    log4javascript

    3. **多个logger实例**:在大型项目中,可能需要为不同的模块或组件创建单独的日志记录器。log4javascript允许创建多个logger实例,每个实例可以有自己的日志级别和输出目的地。 4. **日志格式化**:开发者可以...

    smallworld 下的magik module 的logger和service provider

    首先,logger在软件开发中起着至关重要的作用,它负责记录程序运行时的信息,如错误、警告、调试信息等。在Magik中,logger允许开发者跟踪和诊断代码中的问题,确保系统稳定运行。通常,logger会提供不同的级别,如...

    我记录 内容管理系统 CMS源码

    我记录的缓存组件和配置组件,全部使用 json 进行持久化,是系统的重要组成部分。 wojilu ajax 1、提供了最常用的弹窗、表单验证、菜单等内容; 2、基本上“零js书写”,不需要js基础就能使用,上手非常容易; ...

    基于Vue+typescript版的后台管理系统模板

    10. **错误处理和日志记录**:为了提高系统的稳定性,可以利用Vue的生命周期钩子和TypeScript的异常处理机制,设置全局错误捕获,同时配合日志记录库如`logger`,对应用运行过程中的异常进行记录和处理。 以上就是...

    利用vue写的后台管理系统开源代码

    11. **错误捕获与日志记录**:为了保证系统的稳定运行,开发者可能会使用Vue的errorHandler或Vue Router的全局守卫来捕获和处理运行时错误,同时通过logger库记录系统日志。 12. **单元测试**:Vue.js生态系统提供...

    js 脚本调试工具-支持ie firefox等多种浏览器

    "10.log工具参数说明.html"可能详细解释了日志记录工具的使用,包括不同参数的意义和设置。 5. 压缩包中的"logger.css"文件: 这是一个CSS文件,可能用于美化调试过程中输出的日志信息,使其更易于阅读和理解。 ...

    burger-logger

    "汉堡记录仪",这个项目名称“burger-logger”似乎是一种趣味性的命名,可能与某个特定的编程任务或日志记录工具有关。由于标签显示为"JavaScript",我们可以推测这是一个使用JavaScript语言开发的项目。JavaScript...

    timber-node::warning:替换为timber-js https:github.comtimberiotimber-js

    - `logger` 和 `logging`:指的是日志记录功能,是软件开发中的一个重要组件,用于追踪应用程序的运行情况。 - `timber`:原先是用于Node.js的日志管理库,现在被`timber-js`取代。 - `bunyan-stream` 和 `winston-...

Global site tag (gtag.js) - Google Analytics