论坛首页 → Web前端技术论坛 →

兼容最新的Firefox/3.1b2的JS调试插件FireBug1.3+下载

浏览 5314 次
锁定老帖子 主题：兼容最新的Firefox/3.1b2的JS调试插件FireBug1.3+下载
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • jiangshaolin
  • 等级: 初级会员
  • 性别:
  • 文章: 124
  • 积分: 60
  • 来自: 长沙
   发表时间：2008-12-18   最后修改：2008-12-18
昨天搞了一晚上装了几个JS调试插件，都感觉不太好用。最后有得到javaEye一位朋友badqiu的帮助准备装fireBug。今天早早来到公司第一件事就是装上这个插件，因为以前有一个复杂的JS调试不出来，所以准备用工具调试。Ajax的执行路径真让人头疼，东执行一下西执行一下（到处都是alert()，就是跟踪不到错误在哪 ）。
　　装了好几个都不兼容最新FF，版本兼容一直是开发人员最头疼的问题。下面是我刚刚找到的支持最新FF的地址。
　　URL：http://getfirebug.com/releases/firebug/1.4/
　　随便附上教程：http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html

还有我未调试成功的JS，呵呵 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>

 <BODY>
 <div id="result"></div>
  <script>
var _timeout;
	function wqwAjax(sendurl,result,type){
		//var _timeout;
		var type=type;
		var result=result;
		createXmlHttpResquest.call(this);
		this.startSend=function(){
			xmlHttp.onreadystatechange = callHandler;
			document.getElementById(result).innerHTML="<font color='green'>"+type+"</font>";//up
			xmlHttp.open("post", sendurl, true);
			xmlHttp.send(null);
		}

		function callHandler(){
			if(xmlHttp.readyState==1){
				circling();
			}
			if(xmlHttp.readyState==4){
				 if(xmlHttp.status==200){
					var value=xmlHttp.responseText;
					stopTimeout();
					document.getElementById(result).innerHTML=value;
				 }
			}
		}
		function circling(){
		
			var resultObj=document.getElementById(result).childNodes[0];
			var resultValue=document.getElementById(result).childNodes[0].innerHTML
			if(resultValue.length<=type.length+3){
				document.getElementById(result).childNodes[0].innerHTML=resultValue+".";
			}else if(resultValue.length>resultObj.length+3){
				document.getElementById(result).childNodes[0].innerHTML=type+".";
			}
			_timeout=setTimeout("circling()",500);
			alert(document.getElementById(result).childNodes[0].innerHTML)
		 }
		 function stopTimeout(){
			clearTimeout(_timeout);
		 }
	   }
  
	  wqwAjax.prototype=new createXmlHttpResquest();
	  function createXmlHttpResquest(){
			this.xmlHttp;
			if (window.XMLHttpRequest) {
				xmlHttp = new XMLHttpRequest();
				if (xmlHttp.overrideMimeType) {
					xmlHttp.overrideMimeType("text/xml");
				}
			} else {
				if (window.ActiveXObject) {
					try {
						xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
					}
					catch (e) {
						try {
							xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
						}
						catch (e) {
						}
					}
				}
			}
	  }
	 var ajax=new wqwAjax("http://www.baidu.com","result","call"); 
	 ajax.startSend();
  </script>
 </BODY>
</HTML>

我的目的是调用var ajax=new wqwAjax("telMeeting.do","result","call");
ajax.startSend();来打电话，发短信等。此JS具有通用功能。由于项目中AJAX用得少，所以没用框架。问了fins胖哥，结果他半天还不知道我的意图。一般的人一运行代码，就应该知道了吧，晕了。
返回顶楼
         
  • walkman
  • 等级: 初级会员
  • 性别:
  • 文章: 75
  • 积分: 0
  • 来自: 北京
   发表时间：2008-12-18  

有两个地方错误：

1.

 

	_timeout=setTimeout("circling()",500);  // circling 函数是函数 wqwAjax 内部的一个变量，从 window 对象外不可访问，事实上这种错误是无法调试的

 2.

	var ajax=new wqwAjax("http://www.baidu.com","result","call"); // 不能跨域访问

 

 

根据你的想法，按照我的习惯重构了一下。两个文件：1. test.html 发起请求的页面；2. content.html 被请求的页面

 

test.html 的内容如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>XMLHttpRequest demo</title>
	<script type="text/javascript">
		
		// 创建并返回一个 XMLHttpRequest 对象
		function createXmlHttpResquest(){
			var xmlHttp;
			if(window.XMLHttpRequest){
				xmlHttp = new XMLHttpRequest();
				if(xmlHttp.overrideMimeType){
					xmlHttp.overrideMimeType('text/xml');
				}
			}else{
				if(window.ActiveXObject){
					try{
						xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
					}
					catch(e){
						try{
							xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
						}
						catch(e){}
					}
				}
			}
			return xmlHttp;
		}
		
		function AjaxPanel(container, loadingMsg){
			var c = container.tagName ? container : document.getElementById(container);
			
			var xmlHttp = createXmlHttpResquest();
			
			var onStateChange = function(){
				if(xmlHttp.readyState == 4){
					clearInterval(msgTimer);
					if(xmlHttp.status == 200){	// 需要在 IIS 等环境下测试，否则永远不会是 200
						c.innerHTML += '<br /><div style="background-color:#eee; border:1px solid #666;">' + xmlHttp.responseText + '</div>';
					}else{
						c.innerHTML += '<br /><div style="background-color:#eee; border:1px solid #666; color:Red;">Request fail!</div>';
					}
				}
			}
			
			var msgTimer;
			var updateMsg = function(){
				var extra = c.firstChild.innerHTML.substring(loadingMsg.length);
				c.firstChild.innerHTML = loadingMsg + (!extra ? '.' : (extra == '.' ? '..' : (extra == '..' ? '...' : '')))
			}
			
			return {
				request: function(method, url, data){
					c.innerHTML = '<font color="green">' + loadingMsg + '</font>';
					xmlHttp.open(method, url, true);
					xmlHttp.onreadystatechange = onStateChange;
					xmlHttp.send(data); // 可以将此行注释掉观察 loadingMsg
					msgTimer = setInterval(updateMsg, 500);
				}
			}
		}
		
		window.onload = function(){
			myPanel = new AjaxPanel('c', 'loading');
			myPanel.request('GET', 'content.html', null);
		}
		
	</script>
</head>
  
<body>
	<div id="c"></div>
</body>
</html>

 

content.html 的内容如下：

AJAX CONTENT

 

测试的时候需要真实的运行环境

 
返回顶楼
          回帖地址
0 请登录后投票
  • fins
  • 等级: 资深会员资深会员
  • 性别:
  • 文章: 3196
  • 积分: 2953
  • 来自: 小胖儿的大城
   发表时间：2008-12-18  
jiangshaolin 写道

... ...
我的目的是调用var ajax=new wqwAjax("telMeeting.do","result","call");
ajax.startSend();来打电话，发短信等。此JS具有通用功能。由于项目中AJAX用得少，所以没用框架。问了fins胖哥，结果他半天还不知道我的意图。一般的人一运行代码，就应该知道了吧，晕了。


我现在也没明白 你那几个短消息是让我帮你实现某个功能 还是让我帮你修改现有代码的bug.

看来是我笨了   或者 我也许真的不是一般人
返回顶楼
          回帖地址
0 请登录后投票
  • jiangshaolin
  • 等级: 初级会员
  • 性别:
  • 文章: 124
  • 积分: 60
  • 来自: 长沙
   发表时间：2008-12-19  
fins 写道

jiangshaolin 写道
... ... 我的目的是调用var ajax=new wqwAjax("telMeeting.do","result","call"); ajax.startSend();来打电话，发短信等。此JS具有通用功能。由于项目中AJAX用得少，所以没用框架。问了fins胖哥，结果他半天还不知道我的意图。一般的人一运行代码，就应该知道了吧，晕了。我现在也没明白 你那几个短消息是让我帮你实现某个功能 还是让我帮你修改现有代码的bug. 看来是我笨了&nbsp;&nbsp; 或者 我也许真的不是一般人


   胖哥可能是太忙了,来不及回答我吧,呵呵
返回顶楼
          回帖地址
0 请登录后投票
  • jiangshaolin
  • 等级: 初级会员
  • 性别:
  • 文章: 124
  • 积分: 60
  • 来自: 长沙
   发表时间：2008-12-19  
walkman 写道

有两个地方错误： 1.
&nbsp;


Js代码

_timeout=setTimeout("circling()",500);&nbsp;&nbsp;//&nbsp;circling&nbsp;函数是函数&nbsp;wqwAjax&nbsp;内部的一个变量，从&nbsp;window&nbsp;对象外不可访问，事实上这种错误是无法调试的&nbsp;&nbsp; _timeout=setTimeout("circling()",500);  // circling 函数是函数 wqwAjax 内部的一个变量，从 window 对象外不可访问，事实上这种错误是无法调试的
&nbsp;2.


Js代码

var&nbsp;ajax=new&nbsp;wqwAjax("http://www.baidu.com","result","call");&nbsp;//&nbsp;不能跨域访问&nbsp;&nbsp; var ajax=new wqwAjax("http://www.baidu.com","result","call"); // 不能跨域访问


   你的代码写得很棒 ,向你学习.
   但有几个疑问,
引用
从 window 对象外不可访问
照你说的,那function 里面的function 就没用了?还有,我把你的URL改成www.baidu.com也可以,跨域其实是可以的,明天我会把我改正后的代码附上来.
返回顶楼
          回帖地址
0 请登录后投票
  • walkman
  • 等级: 初级会员
  • 性别:
  • 文章: 75
  • 积分: 0
  • 来自: 北京
   发表时间：2008-12-20  
window.setInterval(code, interval) return timerId(int)
window.setTimeout(code, delay) return timerId(int)
这两个方法中的 code 参数，IE4以前只支持字符串代码，IE4以后支持函数

我的理解：
当 code 为字符串的时候，执行的时候相当于 window.eval(code)，code 中的变量要在 global 对象下可见，很明显你的 circling 方法在 global 下是不可见的，所以执行会失败

当 code 为函数时，Window 对象通过某种映射机制(timerId?)将该方法“变成”它的一个方法，执行的时候相当于 window.code()。这也就是在 code 方法体内 this 指针永远指向 Window 对象，当然 code 所在的 scope 内的变量还是照样可以使用的。
很明显当 code 为一个函数的时候运用比较灵活，因为它可以是一个闭包，可以使用它所在的 scope 中的临时变量

"function 里面的function 就没用了?"
-- 怎么会没用？？用处大了。function 里面的 function 在设计类的时候相当与一个 C++，JAVA 中的一个私有方法，外界无法直接访问，必须要经过公开的方法。如我写的 AjaxPanel 类中，所有 var 定义的都是私有变量，return{} 返回的都是公有的方法或属性，对私有变量的访问必须要通过公有方法或属性


关于跨域。IE 下没问题，Firefox 不行，Firefox 中测试的时候会报没有权限。如果要跨域访问，建议在服务端通过 web 服务跨域访问资源或数据，成功后将结果返回给客户端
返回顶楼
          回帖地址
0 请登录后投票
  • jiangshaolin
  • 等级: 初级会员
  • 性别:
  • 文章: 124
  • 积分: 60
  • 来自: 长沙
   发表时间：2008-12-20  
walkman 写道

window.setInterval(code, interval) return timerId(int) window.setTimeout(code, delay) return timerId(int) 这两个方法中的 code 参数，IE4以前只支持字符串代码，IE4以后支持函数 我的理解： 当 code 为字符串的时候，执行的时候相当于 window.eval(code)，code 中的变量要在 global 对象下可见，很明显你的 circling 方法在 global 下是不可见的，所以执行会失败 当 code 为函数时，Window 对象通过某种映射机制(timerId?)将该方法“变成”它的一个方法，执行的时候相当于 window.code()。这也就是在 code 方法体内 this 指针永远指向 Window 对象，当然 code 所在的 scope 内的变量还是照样可以使用的。


你对JS理解得太深了，好深奥。
我昨天修改后的代码： 
	function createXmlHttpResquest(){
		var xmlHttp;
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
			if (xmlHttp.overrideMimeType) {
				xmlHttp.overrideMimeType("text/xml");
			}
		} else {
			if (window.ActiveXObject) {
				try {
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch (e) {
					try {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch (e) {
					}
				}
			}
		}
		return xmlHttp;
	}

	function circle(result,show){
		var v=document.getElementById(result).childNodes[0].innerHTML;
		if(v.length<=show.length+3){
			document.getElementById(result).childNodes[0].innerHTML=v+".";
		}else{
			document.getElementById(result).childNodes[0].innerHTML=show+".";
		}
	}
	function shows(result,show){
		var interval=setInterval("circle('"+result+"','"+show+"')",500);
		return interval;
	
	}

	var wqwAjax=function(result,show){
		this.result=result;
		this.show=show;
	}
	function sendUtil(){
		this.send=function (url){
			document.getElementById(this.result).innerHTML="<font color='green' size=15 style='display: inline'>"+this.show+"</font>"
			this.interval=shows(this.result,this.show);
			//AJAX请求
			this.xmlHttp=createXmlHttpResquest();
			callHandler.prototype.interval="interval";
			var parent=this;
			var rs=this.result;
			var xml=this.xmlHttp;
			this.xmlHttp.onreadystatechange=function(){callHandler(parent,xml,rs)};
			this.xmlHttp.open("post",url , true);
			this.xmlHttp.send(null);
		}
		var callHandler=function(obj,xml,rs){
			if(xml.readyState<4){
			}
			if(xml.readyState==4){
				clearInterval(obj.interval);
				if(xml.status==200){
					var value=xml.responseText;
					//alert(document.getElement("result"));
					document.getElementById(rs).innerHTML=value;
				}
			}
		}
  	}
  wqwAjax.prototype=new sendUtil();

和你的差不多了。
返回顶楼
          回帖地址
0 请登录后投票
  • jiangshaolin
  • 等级: 初级会员
  • 性别:
  • 文章: 124
  • 积分: 60
  • 来自: 长沙
   发表时间：2008-12-20  
walkman 写道


	function createXmlHttpResquest(){
		var xmlHttp;
		if (window.XMLHttpRequest) {
			xmlHttp = new XMLHttpRequest();
			if (xmlHttp.overrideMimeType) {
				xmlHttp.overrideMimeType("text/xml");
			}
		} else {
			if (window.ActiveXObject) {
				try {
					xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
				}
				catch (e) {
					try {
						xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
					}
					catch (e) {
					}
				}
			}
		}
		return xmlHttp;
	}

	function circle(result,show){
		var v=document.getElementById(result).childNodes[0].innerHTML;
		if(v.length<=show.length+3){
			document.getElementById(result).childNodes[0].innerHTML=v+".";
		}else{
			document.getElementById(result).childNodes[0].innerHTML=show+".";
		}
	}
	function shows(result,show){
		var interval=setInterval("circle('"+result+"','"+show+"')",500);
		return interval;
	
	}

	var wqwAjax=function(result,show){
		this.result=result;
		this.show=show;
	}
	function sendUtil(){
		this.send=function (url){
			document.getElementById(this.result).innerHTML="<font color='green' size=15 style='display: inline'>"+this.show+"</font>"
			this.interval=shows(this.result,this.show);
			//AJAX请求
			this.xmlHttp=createXmlHttpResquest();
			callHandler.prototype.interval="interval";
			var parent=this;
			var rs=this.result;
			var xml=this.xmlHttp;
			this.xmlHttp.onreadystatechange=function(){callHandler(parent,xml,rs)};
			this.xmlHttp.open("post",url , true);
			this.xmlHttp.send(null);
		}
		var callHandler=function(obj,xml,rs){
			if(xml.readyState<4){
			}
			if(xml.readyState==4){
				clearInterval(obj.interval);
				if(xml.status==200){
					var value=xml.responseText;
					//alert(document.getElement("result"));
					document.getElementById(rs).innerHTML=value;
				}
			}
		}
  	}
  wqwAjax.prototype=new sendUtil();
返回顶楼
          回帖地址
0 请登录后投票
  • jsnjlc
  • 等级: 一星会员
  • 性别:
  • 文章: 53
  • 积分: 100
  • 来自: 上海
   发表时间：2009-01-11  
跨域，请使用jsonp来进行。不知道你是跨子域还是完全不同的域名。如果跨子域还可以用命名空间解决，完全不同的域名只能用jsonp比较好办。
返回顶楼
          回帖地址
0 请登录后投票
  • jiangshaolin
  • 等级: 初级会员
  • 性别:
  • 文章: 124
  • 积分: 60
  • 来自: 长沙
   发表时间：2009-01-11  
jsnjlc 写道
跨域，请使用jsonp来进行。不知道你是跨子域还是完全不同的域名。如果跨子域还可以用命名空间解决，完全不同的域名只能用jsonp比较好办。

刚刚Google了一下,还可以,以后还想对JS深入理解.
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics