<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" οnclick="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;backgro