`

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

IEFirebugjQueryprototypeFirefox 
阅读更多
我离不开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>
分享到：
| Javascript作用域浅析
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    IE6下调试工具-js写的高仿firebug

    2. **控制台输出**：提供一个控制台面板，显示JavaScript的错误信息、警告和console.log()等输出，帮助开发者追踪代码执行流程。 3. **DOM检查与修改**：允许开发者查看和修改页面的DOM结构，实时观察元素属性和...

    firebug for IE6+, Firefox, Opera, Safari and Chrome

    标题提到的"firebug for IE6+, Firefox, Opera, Safari and Chrome"，意味着这是一个跨浏览器的解决方案，旨在为开发者提供在不同浏览器上调试和优化网页的能力。 Firebug Lite是Firebug的轻量级版本，适用于不支持...

    firebug-2.0.16-是firefox下的一个扩展,能够调试所有网站语言

    Firebug是firefox下的一个扩展,能够调试所有网站语言，如Html,Css等，但FireBug最吸引人的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能...

    IE6调试神器，免安装，FirebugLite压缩包

    由于IE6在当时存在很多独特的兼容性和性能问题，传统的调试手段往往力不从心，因此Firebug Lite应运而生，它模仿了Firefox上的著名开发者工具——Firebug，为IE6提供了一种类似的功能。 Firebug是Firefox浏览器的一...

    IE bugger(js调试工具)

    总结来说，IE Bgger是前端开发者处理IE浏览器JavaScript问题的强大助手，它集成了源代码查看、断点调试、控制台输出、调用栈分析、性能监测以及DOM操作等多种功能，使开发者能够高效地定位和解决问题，提升开发效率...

    firebugLite

    Firebug Lite的出现弥补了IE浏览器在Web开发工具上的不足，让开发者能够在多种浏览器环境中实现一致的调试体验。 1. **HTML检查和编辑**： Firebug Lite允许开发者查看页面的HTML结构，快速定位元素并进行实时编辑...

    ie6的调试工具

    2. **IE Developer Channel**：虽然这个工具主要是为后来的IE版本设计的，但它也可以用于回溯到IE6的模式，以进行兼容性测试。它提供了元素选择器、CSS编辑器和JavaScript控制台等现代开发者工具的特性。 3. **...

    IE_Debug工具

    **四、IE兼容性挑战** 需要注意的是，由于IE(Debug)工具是为旧版本的IE设计的，对于最新的IE版本和Edge浏览器，开发者应转向使用Microsoft Edge DevTools，这是微软提供的现代跨平台开发者工具，支持多种浏览器引擎...

    ie插件ie插件ie插件ie插件ie插件ie插件

    虽然原生Firebug仅支持Firefox，但在IE中也有类似工具，例如"IE Developer Toolbar"，它允许开发者查看和修改网页元素，检查CSS样式，以及进行网络请求跟踪。 另一个文件名"IE浏览器插件Web Developer中文版.rar...

    IE6调试套件(httpwatch+IEDevToolBar+companionjs)

    2. **IEDevToolBar**：这是微软官方推出的一款IE浏览器开发者工具栏，它提供了类似于Firefox的Firebug的功能，包括HTML查看、CSS编辑、DOM检查、JavaScript控制台等功能。通过IEDevToolBar，开发者可以方便地查看和...

    IE下的WEB调试利器

    对于处理浏览器兼容性问题，特别是针对IE这种曾经市场份额较大的浏览器，这样的调试工具更是不可或缺。 在调试CSS时，可以实时调整元素的样式，查看变化效果，找出导致布局错误的原因。对于DOM操作，可以查看和修改...

    利用Js的console对象,在控制台打印调式信息测试Js的实现

    结果显示，IE11、Firefox（需要加载Firebug插件）、Chrome等浏览器均支持log、info、warn、error、debug五个基本方法。但是，由于浏览器间的差异，为了编写兼容性更强的代码，开发者可以对console的支持进行检测，...

    IE调试工具

    尽管它的功能可能不如Firefox的Firebug那样全面，但对于处理IE浏览器特有的兼容性问题以及进行基本的调试工作，它仍然具有很高的实用性。 **一、什么是IE调试工具** IE调试工具，全称为Internet Explorer ...

    javascript 在firebug调试时用console.log的方法

    在IE中，尽管没有Firebug那么强大，仍然能够输出基本类型的数据，但对于复杂对象和数组的展示则较为有限。 下面是一些`console.log()`的常见用法示例： 1. 输出字符串： ```javascript console.log("Hello, World!...

    Mobile_Debugging_调试小结

    特别提到的是，Firebug Lite在PC上能够为不支持内置调试工具的IE6提供调试服务，显示了开发者对提高老旧浏览器兼容性的努力。 总的来说，Mobile Debugging是一个复杂而重要的领域，开发者需要根据不同的设备和环境...

    网页调试及测试工具

    JavaScript控制台用于追踪脚本错误和输出信息；网络面板可以查看页面加载速度和资源请求；性能分析器用于检测页面性能瓶颈；存储查看则能查看本地存储和Cookie信息。 Firebug是一款曾经非常流行的Firefox插件，但...

    JavaScript css浏览器的调试

    - 使用 Console 选项卡查看控制台输出。 - 使用 Watch Expressions 监控特定变量或表达式的值。 - **总结** - Chrome 的开发者工具提供了丰富的功能，是进行 Web 开发和调试的强大工具之一。 #### 四、对 Safari...

    Selenium中使用XPath.docx

    它可以快速定位和复制XPath表达式，以及在控制台使用 `$x(xpath)` 函数验证XPath的正确性。Firebug生成的XPath通常需要根据实际HTML代码进行微调，因为它们基于DOM树，可能与源代码结构略有不同。 除了XPath，...

    javascript调试说明

    Firefox的Firebug提供了丰富的日志输出功能，而IE8及以上版本在调试模式下支持`console.log`。为了兼容其他浏览器，可以使用以下代码覆盖可能不存在的`console`方法： ```javascript if (!window.console) { ...

Magicbox
Global site tag (gtag.js) - Google Analytics