`

仿firebug的控制台输出,兼容IE

阅读更多
我离不开firefox,主要是离不开firebug,用firebug调试css,js实在是太方便了。
相信很多人和我一样,在firefox下常常用console.log()输出一些对象或变量的值,
在ie里常常用alert()弹出一些对象或变量的值,来作调试
当然,能够在ie下使用console.log的调试功能当然是最好的,哪怕只是最简单的一个变量值的输出也比alert友好一些。
于是有了下面这个简易版的console.log
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie下的console.log</title>
<style>
body {background: #ffffff;	color: #444;}
a{	color: #08e;	text-decoration: none;	border: 0;	background-color: transparent;}
body,div,q,iframe,form,h5{	margin: 0;	padding: 0;}
a img,fieldset { border: none 0; }
body,td,textarea {	word-break: break-all;	word-wrap: break-word;	line-height:1.5;}
body,input,textarea,select,button {	margin: 0;	font-size: 12px;	font-family: Tahoma, SimSun, sans-serif;}
div,p,table,th,td {	font-size:1em;	font-family:inherit;	line-height:inherit;}
</style>
</head>
<body>
<div id="div1" class="style1"></div>
<p><input type="button" value="返回一个object" onclick="test1()" />
<input type="button" value="返回一个element" onclick="test2()" />
<input type="button" value="返回一个function" onclick="test3()" />
<input type="button" value="返回一个arrary" onclick="test4()" />
</p>
<div id="div2" class="style1"></div>
<script>sometext("div1",200);sometext("div2",200);</script>
</body>
</html>

<script type="text/javascript">
var debug=true;
var $id = function (id) {//避免与jQuery的$函数冲突
	return typeof id == "string" ? document.getElementById(id) : id;
};
if(!$){var $=$id;}
if(!window.console){
	window.console={}
	window.console.cache=[];
	window.console.constr=function(_value){
		if(!_value)return;
		var result = [];
		if (_value instanceof Function){
			result.push(_value);
		}else if(_value!=undefined&&Boolean(_value.nodeName)&&Boolean(_value.nodeType)){
			result.push(_value.nodeName.toLowerCase());
			result.push(_value.getAttribute("id")?"id="+_value.getAttribute("id"):"");
			result.push(_value.getAttribute("className")?"class="+_value.getAttribute("className"):"");
			return "&lt;"+result.join(" ")+"&gt;";
		}else if(_value instanceof Array){
			for(var i=0; i< _value.length; i++){
				if(typeof _value[i]== 'string')
					result.push("\""+_value[i]+"\"");
				else
					result.push(_value[i]);
			}
			return "["+result.join(", ")+"]";
		}else if(typeof _value == "object"){
			for (var p in _value){
				if(_value.hasOwnProperty(p) && p!='prototype'){
					result.push("'"+p+"':"+_value[p]);
				}
			};
			return "{"+result.join(", ")+"}";
		}else if(typeof _value == 'string'){
			return "\""+_value+"\"";
		}else if(typeof _value == 'number' && isFinite(_value)){
			result.push(_value);
		}else{
			result.push(_value);
		}
		return result.join("");
	}
	window.console.log=function(outputValue){
		if(!debug)return;
		if(!outputValue)return null;
		var bgColor=bgColor||"#fff";
		consoleDiv =$id("_console");
		if(!consoleDiv){
			consoleDiv=document.createElement("div");
			consoleDiv.id="_console";
			consoleDiv.style.cssText="position:absolute; z-index:9999; left:0%;top:"+Math.max(document.documentElement.scrollTop, document.body.scrollTop)+"px; width:62%; background-color:#fff; border:1px solid #359; opacity:0.9; filter:alpha(opacity=90); padding:4px;"
			consoleDiv.innerHTML='<div id="_consoleHead" style="background-color:#cde; height:20px; color:#000; font-size:12px; line-height:20px; cursor:move;"><a style="color:#123; float:right; text-decoration:none; margin:1px 2px 0;" href="javascript:$id(\'_console\').style.display=\'none\';void(0);">[关闭]</a><a style="color:#123; float:right; text-decoration:none; margin:1px 2px 0;" href="javascript:$id(\'_consoleBody\').innerHTML=\'\';void(0);">[清空]</a></div>';
			consoleDivBody=document.createElement("div");
			consoleDivBody.id="_consoleBody";
			consoleDivBody.style.cssText="font-size:12px; line-height:1.5;color:#333; width:100%; max-height:150px; overflow:auto;"
			consoleDivBody.innerHTML='';
			
			consoleDiv.appendChild(consoleDivBody);
			document.getElementsByTagName("BODY")[0].appendChild(consoleDiv);
			if(Drag)
				Drag.init($id("_consoleHead"),consoleDiv);//注册拖拽方法,可以使用自己的拖拽方法来代替,以减少代码量
		}
		consoleDiv.style.display="";
		var consoleDivTop=consoleDiv.style.top.replace(/\D/gi,"");
		if(consoleDivTop<Math.max(document.documentElement.scrollTop, document.body.scrollTop)||consoleDivTop>Math.max(document.documentElement.scrollTop, document.body.scrollTop)+(document.compatMode == "BackCompat"?document.body.clientHeight:document.documentElement.clientHeight))
			consoleDiv.style.top=Math.max(document.documentElement.scrollTop, document.body.scrollTop)+"px";
		var newItem=document.createElement("div");
		newItem.style.cssText="border-top:1px solid #cde; padding:3px;font-family:'Courier New'; font-size:13px; background-color:"+bgColor;
          var content = [];
          for(var i=0, len=arguments.length; i<len; i++){
            content.push( window.console.constr(arguments[i]) );
          }
		newItem.innerHTML= content.join(" ");
		$id("_consoleBody").appendChild(newItem);
		$id("_consoleBody").scrollTop=9999;
	};
}
/***小巧的拖拽类***/
var Drag={
    "obj":null,
	"init":function(handle, dragBody, e){
		if (e == null) {
			handle.onmousedown=Drag.start;
		}
		handle.root = dragBody;
		if(isNaN(parseInt(handle.root.style.left)))handle.root.style.left="0px";
		if(isNaN(parseInt(handle.root.style.top)))handle.root.style.top="0px";
		handle.root.onDragStart=new Function();
		handle.root.onDragEnd=new Function();
		handle.root.onDrag=new Function();
		if (e !=null) {
			var handle=Drag.obj=handle;
			e=Drag.fixe(e);
			var top=parseInt(handle.root.style.top);
			var left=parseInt(handle.root.style.left);
			handle.root.onDragStart(left,top,e.pageX,e.pageY);
			handle.lastMouseX=e.pageX;
			handle.lastMouseY=e.pageY;
			document.onmousemove=Drag.drag;
			document.onmouseup=Drag.end;
		}
	},
	"start":function(e){
		var handle=Drag.obj=this;
		e=Drag.fixEvent(e);
		var top=parseInt(handle.root.style.top);
		var left=parseInt(handle.root.style.left);
		//alert(left)
		handle.root.onDragStart(left,top,e.pageX,e.pageY);
		handle.lastMouseX=e.pageX;
		handle.lastMouseY=e.pageY;
		document.onmousemove=Drag.drag;
		document.onmouseup=Drag.end;
		return false;
	},
	"drag":function(e){
		e=Drag.fixEvent(e);
		var handle=Drag.obj;
		var mouseY=e.pageY;
		var mouseX=e.pageX;
		var top=parseInt(handle.root.style.top);
		var left=parseInt(handle.root.style.left);
		if(document.all){Drag.obj.setCapture();}else{e.preventDefault();};//作用是将所有鼠标事件捕获到handle对象,对于firefox,以用preventDefault来取消事件的默认动作:
		var currentLeft,currentTop;
		currentLeft=left+mouseX-handle.lastMouseX;
		currentTop=top+(mouseY-handle.lastMouseY);
		handle.root.style.left=currentLeft +"px";
		handle.root.style.top=currentTop+"px";
		handle.lastMouseX=mouseX;
		handle.lastMouseY=mouseY;
		handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);
		return false;
	},
	"end":function(){
		if(document.all){Drag.obj.releaseCapture();};//取消所有鼠标事件捕获到handle对象
		document.onmousemove=null;
		document.onmouseup=null;
		Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
		Drag.obj=null;
	},
	"fixEvent":function(e){//格式化事件参数对象
		var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
		var st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
		if(typeof e=="undefined")e=window.event;
		if(typeof e.layerX=="undefined")e.layerX=e.offsetX;
		if(typeof e.layerY=="undefined")e.layerY=e.offsetY;
		if(typeof e.pageX == "undefined")e.pageX = e.clientX + sl - document.body.clientLeft;
		if(typeof e.pageY == "undefined")e.pageY = e.clientY + st - document.body.clientTop;
		return e;
	}
};
/***测试***/
function sometext(ele,n){
	var strArr=["可","以","清","心","也"];
	var writeStr=""
	for(i=0;i<n;i++){
		index=parseInt(Math.random()*5);
		for(j=0;j<5;j++){
			str=index+j>4?index+j-5:index+j;
			writeStr+=strArr[str];
		}
	}
	$(ele).innerHTML=writeStr;
}
function test1(){
	console.log("这是一个js对象:",{w:100,h:50,area:function(){return this.w*this.h}})
}
function test2(){
	console.log("这是一个dom对象:",$id("div1"))
}
function test3(){
	var arr=function(w,h){return w*h;}
	console.log("这是一个js函数:",arr)
}
function test4(){
	var arr=[1,2.2,"a","abc",true,false,new Date(),/<[^>]*>/,function(){alert(0);}]
	console.log("这是一个数组:",arr)
}
</script>


在完成上面的简易版console.log()的过程中,看了一下firebug的代码,于是有了下面的加强版
console.log()
对类型的识别更准确,还有多种高亮区分数据类型哦。
当然,代码量也多了许多,有200多行。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ie下的console.log</title>
<style>
body {background: #ffffff;	color: #444;}
a{	color: #08e;	text-decoration: none;	border: 0;	background-color: transparent;}
body,div,q,iframe,form,h5{	margin: 0;	padding: 0;}
a img,fieldset { border: none 0; }
body,td,textarea {	word-break: break-all;	word-wrap: break-word;	line-height:1.5;}
body,input,textarea,select,button {	margin: 0;	font-size: 12px;	font-family: Tahoma, SimSun, sans-serif;}
div,p,table,th,td {	font-size:1em;	font-family:inherit;	line-height:inherit;}
</style>
<script type="text/javascript">
var debug=true;
var $id = function (id) {//避免与jQuery的$函数冲突
	return typeof id == "string" ? document.getElementById(id) : id;
};
if(!$){var $=$id;}
if(!window.console){
	window.console={}
	window.console.cache=[];
	window.console.constr=function(_value,_inObject,_inArray,_link){
		var isArray = false, isHash, isElement = false, vtype=typeof _value, result=[];
        if(vtype=="object"){
			if(Object.prototype.toString.call(_value) === "[object Date]"){
				vtype = "date";
			} else if(Object.prototype.toString.call(_value) === "[object String]"){
				vtype = "string";
			} else if(Object.prototype.toString.call(_value) === "[object Boolean]"){
				vtype = "boolean";
			} else if(Object.prototype.toString.call(_value) === "[object RegExp]"){
				vtype = "regexp";
			}
		}
try{
		if(_value instanceof Array&&typeof _object!="function")
			isArray=true;
		if(typeof _value=="object"&&(_value==window||_value instanceof Object)&&!_value.nodeName)
			isHash=true;
		if(_value!=undefined&&Boolean(_value.nodeName)&&Boolean(_value.nodeType))
			isElement=true;
		// number, string, boolean, null, function
		if(_value==null||vtype=="number"||vtype=="string"||vtype=="boolean"||(vtype=="function"&&_value.nodeName!="OBJECT")||vtype=="regexp"||vtype=="date"){
			if(_value==null){
			  if(_value===undefined) {
				result.push("<span style='color:#999'>undefined</span>");
			  } else {
				result.push("<span style='color:#999'>null</span>");
			  }
			}else if (vtype=="regexp") {
			  result.push("<span style='color:#360'>" + _value + "</span>");
			}else if (vtype=="date") {
			  result.push("<span style='color:#060;'>'" + _value + "'</span>");
			} else if (vtype=="number") {
			  result.push("<span style='color:#009'>" + _value + "</span>");
			} else if (vtype=="boolean") {
			  result.push("<span style='color:#00c'>" + _value + "</span>");
			} else if(vtype=="function"){
			  result.push("<span style='color:"+(_inObject?"#696":"#090")+"'>function()</span>");
			} else {
			  result.push("<span style='color:#e22'>"+( !_inObject&&!_inArray?_value : "\""+_value.substring(0,35)+(_value.length>35?" ...":"")+"\"" ).replace(/\n/g,"\\n").replace(/\s/g," ").replace(/>/g,"&#62;").replace(/</g,"&#60;")+"</span>");
			}
		}
          // element
          else if(isElement){
            if(_value.nodeType==3)
              result.push(console.constr(_value.nodeValue));
            else if(_inObject){
              result.push("<span style='color:#999'>"+_value.nodeName.toLowerCase()+"</span>");
            } else {
              result.push("<span style='color:#00f;"+ ( !_inObject&&!_inArray?"'":"text-decoration:underline; cursor:pointer;' onclick='console.log(console.cache[" +(console.cache.push( _value ) -1 )+"])'" ) + "'>");
              if(_inArray){
                result.push(_value.nodeName.toLowerCase());
                if(_value.getAttribute){
                  if(_value.getAttribute&&_value.getAttribute("id"))
                    result.push("<span style='color:#009'>#"+_value.getAttribute("id")+"</span>");
                  var elClass = _value.getAttribute(document.all?"className":"class")||"";
                  result.push(!elClass?"":"<span style='color:#f00'>."+elClass.split(" ")[0]+"</span>");
                }
                result.push("</span>");
              } else {
                result.push("<span style='color:#009'>&#60;<span style='color:#00f'>"+ _value.nodeName.toLowerCase());
                if(_value.attributes){
                  for(var i=0,len=_value.attributes.length; i<len; i++){
                    var item = _value.attributes[i];
                    if(!document.all||item.nodeValue)
                      result.push(" <span style='color:#009'>"+item.nodeName+"=\"<span style='color:#f00'>"+item.nodeValue+"</span>\"</span>");
                  }
                }
                result.push("</span>&#62;</span>");
              }
            }
          } 
          // array, hash
          else if(isArray||isHash){
            if(isArray){
              if(_inObject){
                result.push("<span style='color:#999'>["+_value.length+"]</span>");
              } else {
                result.push("<span style='font-weight:normal'>[ ");
                for(var i=0,len=_value.length; i<len; i++){
                  if((_inObject||_inArray)&&i>3){
                    result.push(", <span style='color:#999;font-weight:bold'>"+(len-4)+" More...</span>");
                    break;
                  }
                  result.push( (i > 0 ? ", " : "") + console.constr(_value[i], false, true, true) );
                }
                result.push(" ]</span>");
              }
            } else if(_inObject){
              result.push("<span  style='color:#009;'>Object</span>");
            } else {  
              result.push("<span  style='color:#060;font-weight:normal;"+ ( !_inObject&&!_inArray?"'":" text-decoration:underline; cursor:pointer;' onclick='console.log(console.cache[" +( console.cache.push( _value ) -1 )+"])'" ) + ">Object");
              var i=0;
              for(var key in _value){
                var value = _value[key];
                if((_inObject||_inArray)&&i>3){
                  result.push(" <span style='color:#999;font-weight:bold;'>More...</span>");
                  break;
                }
                result.push(" "+key+"="+console.constr(value,true));
                i++;
              }
              result.push("</span>");
            } 
          } else {
            result.push(["<span style='color:#999;'>"+_value+"</span>"]);
          }
        } catch(e){
          result.push(".."); 
        }
        return result.join("");
}
	window.console.log=function(outputValue){
		if(!debug)return;
		if(!outputValue)return null;
		var bgColor=bgColor||"#fff";
		consoleDiv =$id("_console");
		if(!consoleDiv){
			consoleDiv=document.createElement("div");
			consoleDiv.id="_console";
			consoleDiv.style.cssText="position:absolute; z-index:9999; left:0%;top:"+Math.max(document.documentElement.scrollTop, document.body.scrollTop)+"px; width:62%; background-color:#fff; border:1px solid #359; opacity:0.9; filter:alpha(opacity=90); padding:4px;"
			consoleDivHead=document.createElement("div");
			consoleDivHead.id="_consoleHead";
			consoleDivHead.style.cssText="background-color:#cde; height:20px; color:#000; font-size:12px; line-height:20px; cursor:move; "
			consoleDivHead.innerHTML='<a style="color:#123; float:right; text-decoration:none; margin:1px 2px 0;" href="javascript:$id(\'_console\').style.display=\'none\';void(0);">[关闭]</a><a style="color:#123; float:right; text-decoration:none; margin:1px 2px 0;" href="javascript:$id(\'_consoleBody\').innerHTML=\'\';void(0);">[清空]</a>'
			consoleDivBody=document.createElement("div");
			consoleDivBody.id="_consoleBody";
			consoleDivBody.style.cssText="font-size:12px; line-height:1.5;color:#333; width:100%; max-height:150px; overflow:auto;"
			consoleDivBody.innerHTML='';
			
			consoleDiv.appendChild(consoleDivHead);
			consoleDiv.appendChild(consoleDivBody);
			document.getElementsByTagName("BODY")[0].appendChild(consoleDiv);
			if(Drag)
				Drag.init(consoleDivHead,consoleDiv);//注册拖拽方法
		}
		consoleDiv.style.display="";
		var consoleDivTop=consoleDiv.style.top.replace(/\D/gi,"");
		if(consoleDivTop<Math.max(document.documentElement.scrollTop, document.body.scrollTop)||consoleDivTop>Math.max(document.documentElement.scrollTop, document.body.scrollTop)+(document.compatMode == "BackCompat"?document.body.clientHeight:document.documentElement.clientHeight))
			consoleDiv.style.top=Math.max(document.documentElement.scrollTop, document.body.scrollTop)+"px";
		var newItem=document.createElement("div");
		newItem.style.cssText="border-top:1px solid #cde; padding:3px;font-family:'Courier New'; font-size:13px; background-color:"+bgColor;
          var content = [];
          for(var i=0, len=arguments.length; i<len; i++){
            content.push( window.console.constr(arguments[i],false,false,true) );
          }
		newItem.innerHTML= content.join(" ");
		$id("_consoleBody").appendChild(newItem);
		$id("_consoleBody").scrollTop=9999;
	};
	window.onerror = function(message,file,line){
		if(!debug)return;
		window.console.log('行:'+line+'  错误:'+message+'  文件:'+file);
	};
}
/***小巧的拖拽类***/
var Drag={
    "obj":null,
	"init":function(handle, dragBody, e){
		if (e == null) {
			handle.onmousedown=Drag.start;
		}
		handle.root = dragBody;
		if(isNaN(parseInt(handle.root.style.left)))handle.root.style.left="0px";
		if(isNaN(parseInt(handle.root.style.top)))handle.root.style.top="0px";
		handle.root.onDragStart=new Function();
		handle.root.onDragEnd=new Function();
		handle.root.onDrag=new Function();
		if (e !=null) {
			var handle=Drag.obj=handle;
			e=Drag.fixe(e);
			var top=parseInt(handle.root.style.top);
			var left=parseInt(handle.root.style.left);
			handle.root.onDragStart(left,top,e.pageX,e.pageY);
			handle.lastMouseX=e.pageX;
			handle.lastMouseY=e.pageY;
			document.onmousemove=Drag.drag;
			document.onmouseup=Drag.end;
		}
	},
	"start":function(e){
		var handle=Drag.obj=this;
		e=Drag.fixEvent(e);
		var top=parseInt(handle.root.style.top);
		var left=parseInt(handle.root.style.left);
		//alert(left)
		handle.root.onDragStart(left,top,e.pageX,e.pageY);
		handle.lastMouseX=e.pageX;
		handle.lastMouseY=e.pageY;
		document.onmousemove=Drag.drag;
		document.onmouseup=Drag.end;
		return false;
	},
	"drag":function(e){
		e=Drag.fixEvent(e);
		var handle=Drag.obj;
		var mouseY=e.pageY;
		var mouseX=e.pageX;
		var top=parseInt(handle.root.style.top);
		var left=parseInt(handle.root.style.left);
		if(document.all){Drag.obj.setCapture();}else{e.preventDefault();};//作用是将所有鼠标事件捕获到handle对象,对于firefox,以用preventDefault来取消事件的默认动作:
		var currentLeft,currentTop;
		currentLeft=left+mouseX-handle.lastMouseX;
		currentTop=top+(mouseY-handle.lastMouseY);
		handle.root.style.left=currentLeft +"px";
		handle.root.style.top=currentTop+"px";
		handle.lastMouseX=mouseX;
		handle.lastMouseY=mouseY;
		handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);
		return false;
	},
	"end":function(){
		if(document.all){Drag.obj.releaseCapture();};//取消所有鼠标事件捕获到handle对象
		document.onmousemove=null;
		document.onmouseup=null;
		Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
		Drag.obj=null;
	},
	"fixEvent":function(e){//格式化事件参数对象
		var sl = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
		var st = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
		if(typeof e=="undefined")e=window.event;
		if(typeof e.layerX=="undefined")e.layerX=e.offsetX;
		if(typeof e.layerY=="undefined")e.layerY=e.offsetY;
		if(typeof e.pageX == "undefined")e.pageX = e.clientX + sl - document.body.clientLeft;
		if(typeof e.pageY == "undefined")e.pageY = e.clientY + st - document.body.clientTop;
		return e;
	}
};
/***测试***/
function sometext(ele,n){
	var strArr=["可","以","清","心","也"];
	var writeStr=""
	for(i=0;i<n;i++){
		index=parseInt(Math.random()*5);
		for(j=0;j<5;j++){
			str=index+j>4?index+j-5:index+j;
			writeStr+=strArr[str];
		}
	}
	$(ele).innerHTML=writeStr;
}
function test1(){
	console.log("这是一个js对象:",{w:100,h:50,area:function(){return this.w*this.h}})
}
function test2(){
	console.log("这是一个dom对象:",$id("div1"))
}
function test3(){
	var arr=function(w,h){return w*h;}
	console.log("这是一个js函数:",arr)
}
function test4(){
	var arr=[1,2.2,"a","abc",true,false,new Date(),/<[^>]*>/,function(){alert(0);},{w:100,h:50},$id("div1")];
	console.log("这是一个数组:",arr)
}
</script>
</head>
<body>
<div id="div1" class="style1"></div>
<p><input type="button" value="返回一个object" onclick="test1()" />
<input type="button" value="返回一个element" onclick="test2()" />
<input type="button" value="返回一个function" onclick="test3()" />
<input type="button" value="返回一个arrary" onclick="test4()" />
</p>
<div id="div2" class="style1"></div>
<script>sometext("div1",200);sometext("div2",200);</script>
</body>
</html>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics