`
jiangshaolin
  • 浏览: 57556 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

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

FirefoxAjaxjsonpXMLFirebug 
阅读更多
昨天搞了一晚上装了几个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胖哥，结果他半天还不知道我的意图。一般的人一运行代码，就应该知道了吧，晕了。
分享到：
| 初入javaeye的通病!!
评论
9 楼 jiangshaolin 2009-01-11  
jsnjlc 写道
跨域，请使用jsonp来进行。不知道你是跨子域还是完全不同的域名。如果跨子域还可以用命名空间解决，完全不同的域名只能用jsonp比较好办。

刚刚Google了一下,还可以,以后还想对JS深入理解.
8 楼 jsnjlc 2009-01-11  
跨域，请使用jsonp来进行。不知道你是跨子域还是完全不同的域名。如果跨子域还可以用命名空间解决，完全不同的域名只能用jsonp比较好办。
7 楼 jiangshaolin 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();
6 楼 jiangshaolin 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();

和你的差不多了。
5 楼 walkman 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 服务跨域访问资源或数据，成功后将结果返回给客户端
4 楼 jiangshaolin 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也可以,跨域其实是可以的,明天我会把我改正后的代码附上来.
3 楼 jiangshaolin 2008-12-19  
fins 写道

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


   胖哥可能是太忙了,来不及回答我吧,呵呵
2 楼 fins 2008-12-18  
jiangshaolin 写道

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


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

看来是我笨了   或者 我也许真的不是一般人
1 楼 walkman 2008-12-18  
<p>有两个地方错误： <br/><br/>1.</p>
<p> </p>
<pre name='code' class='js'> _timeout=setTimeout("circling()",500);  // circling 函数是函数 wqwAjax 内部的一个变量，从 window 对象外不可访问，事实上这种错误是无法调试的</pre>
<p> 2.</p>
<pre name='code' class='js'> var ajax=new wqwAjax("http://www.baidu.com","result","call"); // 不能跨域访问</pre>
<p> </p>
<p> </p>
<p>根据你的想法，按照我的习惯重构了一下。两个文件：1. test.html 发起请求的页面；2. content.html 被请求的页面</p>
<p> </p>
<p>test.html 的内容如下：</p>
<pre name='code' class='js'>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;title&gt;XMLHttpRequest demo&lt;/title&gt;
&lt;script type="text/javascript"&gt;

// 创建并返回一个 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 += '&lt;br /&gt;&lt;div style="background-color:#eee; border:1px solid #666;"&gt;' + xmlHttp.responseText + '&lt;/div&gt;';
}else{
c.innerHTML += '&lt;br /&gt;&lt;div style="background-color:#eee; border:1px solid #666; color:Red;"&gt;Request fail!&lt;/div&gt;';
}
}
}

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 = '&lt;font color="green"&gt;' + loadingMsg + '&lt;/font&gt;';
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);
}

&lt;/script&gt;
&lt;/head&gt;
 
&lt;body&gt;
&lt;div id="c"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt; 
</pre>
<p> </p>
<p>content.html 的内容如下：</p>
<pre name='code' class='html'>AJAX CONTENT</pre>
<p> </p>
<p>测试的时候需要真实的运行环境</p>
<p> </p>
发表评论

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

相关推荐

    火狐浏览器 Debug 插件 FireBug 2.0.19 + 关闭火狐自动更新的方法.zip

    火狐浏览器 Debug 调试插件 FireBug 2.0.19 【由于无法自定义积分，抱歉 如果对您有帮助，请记得评分5星，谢谢~】 火狐浏览器关闭自动更新、历史版本下载，请移步我的博客查看：...

    js 调试插件 firebug

    js 调试插件 firebug 最新版绝对好用！

    firebug +Firefox

    "full-latest"可能指的是这个版本是最完整且最新的，包含了所有功能并保持了与最新Firefox版本的兼容性。 在描述中提到的“front-end testing tool”，表明Firebug的核心功能在于前端开发和测试。它允许开发者实时...

    火狐调试插件firebug-1.3.3-fx.zip

    火狐调试插件Firebug是Web开发者不可或缺的工具之一，特别是在1.3.3版本时，它已经展现出强大的功能和实用性。Firebug是一款开源的Firefox扩展，它允许开发者深入浏览器内部，对HTML、CSS、JavaScript以及网络请求...

    Firefox插件（Firebug+Firepath）.zip

    《Firefox插件：Firebug与Firepath的深度解析与应用》 在当今互联网技术日新月异的时代，软件测试和自动化测试成为了确保产品质量的关键环节。其中，浏览器插件作为辅助测试的强大工具，受到了广大开发和测试人员的...

    firebug1.3x.3和1.4.0

    Firebug是一款历史悠久且备受开发者喜爱的Firefox浏览器插件，它为网页前端开发提供了强大的调试工具。在本话题中，我们将深入探讨Firebug的1.3x.3和1.4.0这两个版本。 首先，Firebug 1.3x.3是该插件的一个早期版本...

    firefox5+firebug1.8+xpath_checker0.4.4

    标题“firefox5+firebug1.8+xpath_checker0.4.4”提及的是一个针对Firefox浏览器的扩展组合，其中包括Firefox 5浏览器、Firebug 1.8版本以及XPath Checker 0.4.4插件。这个组合对于网页开发者和前端工程师来说非常...

    firefox插件firebug

    Firebug是Firefox浏览器的一款经典开发工具插件，它在Web开发者中广受欢迎，尤其是在前端开发领域。这款插件提供了一整套强大的功能，包括HTML、CSS、JavaScript的实时编辑和调试，以及网络请求的监控和分析。以下是...

    firefox及插件firebug

    在开始了解Firefox和Firebug的详细知识点之前，首先确保你已经下载了Firefox安装包和对应的Firebug插件。安装Firefox的过程相对简单，只需运行安装程序并按照提示进行即可。对于Firebug，通常需要在Firefox浏览器中...

    火狐浏览器js插件firebug最新版

    描述中提到的“火狐浏览器js插件firebug最新版下载包”，意味着包含有所有必要的文件，供用户下载并安装到他们的Firefox浏览器中。这个下载包通常会包括以下几个关键部分： 1. `chrome.manifest`：这是一个配置文件...

    firefox-nightly-10.0a1+firebug+简体中文语言包

    Firebug是Web开发和调试的重要工具，它作为一个插件集成在Firefox中。Firebug允许开发者查看和修改HTML、CSS，调试JavaScript，以及分析网络性能。版本1.9.0a4是Firebug的一个早期预览版本，可能包括新功能和修复的...

    火狐js调试插件之firebug

    火狐js调试插件之firebug1.6，比较强大，值得推荐！

    javascript调试工具firebug-1.4.0b4

    JavaScript是Web开发中的核心语言，而Firebug是Firefox浏览器中的一款强大插件，专为开发者设计，用于调试JavaScript、查看CSS、操作DOM以及分析页面性能。"javascript调试工具firebug-1.4.0b4"这个标题指出我们讨论...

    firefox firebug 插件

    Firebug是Firefox浏览器的一款经典开发插件，它在Web开发者中具有广泛的影响力，尤其是在前端调试领域。这款插件提供了一整套工具，帮助开发者检查、修改和监控网页的HTML、CSS、JavaScript以及网络请求等。在Fire...

    firefox插件Firebug

    **Firefox插件Firebug详解** 火狐浏览器的Firebug是一款强大的网页开发和调试工具，它为前端开发者提供了直观且深入的HTML、CSS、JavaScript以及网络请求的查看和编辑功能。这款插件自2004年发布以来，一直备受...

    火狐网页调试工具-firebug+web_developer插件

    火狐浏览器作为一款深受开发者喜爱的浏览工具，其强大的网页调试功能主要体现在内置的Firebug扩展和Web Developer插件上。这两个工具对于前端开发者来说，是优化和调试网页代码的重要助手。 **火狐内置的Firebug...

    firefox52+geckodriver0.11.1+firebug+firepath+selenium_ide五合一.rar

    这是一个关于自动化测试的资源集合，主要涉及Firefox浏览器的特定版本（Firefox52）以及与之相关的几个关键工具：GeckoDriver、Firebug、FirePath和Selenium IDE。这些工具在Web自动化测试领域扮演着重要角色，尤其...

    Firebug 火狐调试器

    Firebug是Mozilla Firefox浏览器的一个插件，专为前端开发者提供强大的JavaScript调试功能，使得对网页上的脚本进行实时分析、修改和测试成为可能。这款工具的出现，极大地提升了开发人员对网页代码的调试效率，特别...

    Firefox Setup 35.0.1+firebug-2.0.8-fx+selenium_ide-2.9.1-fx.rar

    标题中的"Firefox Setup 35.0.1+firebug-2.0.8-fx+selenium_ide-2.9.1-fx.rar"表明这是一个包含Firefox浏览器特定版本（35.0.1）以及两个插件的压缩包：Firebug 2.0.8 和 Selenium IDE 2.9.1。这些工具在Web开发和...

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