我有一个带有大量jQuery(document).ready()处理程序的网页.问题是,当jQuery(document).ready()处理程序中抛出异常时,我得到一个具有多个匿名函数的调用栈,并且没有指向实际抛出异常的代码的指针.
每当我尝试用一个小的网页来重现这个行为,我总是得到一个指针,抛出异常的代码,但在生产代码中,我从来没有得到堆栈指针.这使得调试更令人沮丧和容易出错.
有人在这里有什么想法可能导致这种行为和如何使它正确吗？
更新：自从我发布了这个问题已经好几个月了,我现在相信我已经决定性地转载了这个问题.我用以下HTML重现问题：
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
Factorial Page
<input type='button' value='Factorial' id='btnFactorial' />
<script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(documentReady);
function documentReady() {
$('#btnFactorial').click(btnFactorial_click);
factorial(-1);
}
function btnFactorial_click() {
var x;
x = prompt('Enter a number to compute factorial for.','');
alert(x + '! = ' + factorial(x));
}
function factorial(x) {
if (x < 0)
throw new Error('factorial function doesn\'t support negative numbers');
else if (x === 0 || x === 1)
return 1;
else
return factorial(x - 1) * x;
}
</script>
</body>
</html>
看看代码,你会看到,当你点击一个按钮,代码提醒你所指定的数字的阶乘.输入负数,将产生错误.在这种情况下,Visual Studio将捕获错误并突出显示错误发生的代码行,并显示一个包含因子和btnFactorial_click的调用堆栈.
该代码还从$(document).ready处理程序中调用因子(-1).在这种情况下,Visual Studio将突出显示移动到以下jQuery代码中的finally块(摘自jquery-1.6.1.js,从第987行开始
// resolve with given context and args
resolveWith: function( context,args ) {
if ( !cancelled && !fired && !firing ) {
// make sure args are available (#8421)
args = args || [];
firing = 1;
try {
while( callbacks[ 0 ] ) {
callbacks.shift().apply( context,args );
}
}
finally {
fired = [ context,args ];
firing = 0;
}
}
return this;
},
虽然没有显示调用堆栈,但Visual Studio会显示一个弹出窗口,显示错误的文本.
这个奇怪行为的原因是什么,如何设计我的应用程序,以便我可以轻松地捕获源自处理程序的错误,例如$(document).ready？
解决方法
你使用什么类型的调试器？他们往往会有所不同,而且我发现最好的是Firefox,因为他们有一些非常好的集成工具.
虽然重现一个问题是很好的,但是当它不能以一个简单的简洁例子再现时,调试变得越来越重要.设置断点并逐行排列有时是唯一的方法,而不是等待错误发生在运行时,然后跟踪.
MSDN文章中列出了几种方法,可帮助您解决问题.我相信你已经尝试了一些,但至少值得一提的是 – 特别是“场景3：我在一组帮助方法里面有一个错误,我不知道错误发生在哪里.”
“如何调试你的jQuery代码”
http://msdn.microsoft.com/en-us/magazine/ee819093.aspx
针对新内容进行编辑
jsfiddle的新内容：http://jsfiddle.net/EJbsS/
当在chrome中运行jsfiddle时,首先运行阶乘(-1)被调用.出现错误.可以通过点击右下角的红色x或通过检查元素,导航到控制台选项卡,然后查看文本区域来访问它.错误正确地显示“未捕获的错误：因子函数不支持负数”,并链接到使用throw new Error()的确切行.
也许我需要更多的澄清,你想解决的问题是什么？似乎chrome调试这个脚本很好.也许Visual Studio的调试器有一些问题.
此外
这是一个可以从保存为.html的记事本中使用的工作页面的复制
<!DOCTYPE html> <html> <head> <Meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>demo</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(document).ready(documentReady); function documentReady() { $('#btnFactorial').click(btnFactorial_click); factorial(-1); } function btnFactorial_click() { var x; x = prompt('Enter a number to compute factorial for.',''); alert(x + '! = ' + factorial(x)); } function factorial(x) { if (x < 0) throw new Error('factorial function doesn\'t support negative numbers'); else if (x === 0 || x === 1) return 1; else return factorial(x - 1) * x; } });//]]> </script> </head> <body> Factorial Page <input type='button' value='Factorial' id='btnFactorial' /> </body> </html>
当在Google Chrome中运行此页面时,导航到源选项卡,并在第26行设置断点：如果(x <0),则在页面运行时,整个调用堆栈被重现,在右侧.
factorial (debugpage.html:26) documentReady (debugpage.html:16) jQuery.extend._Deferred.deferred.resolveWith (jquery-1.6.4.js:1016) jQuery.extend._Deferred.deferred.done (jquery-1.6.4.js:1002) jQuery.fn.jQuery.ready (jquery-1.6.4.js:282) (anonymous function) (debugpage.html:11) jQuery.event.handle (jquery-1.6.4.js:3001) jQuery.event.add.elemData.handle.eventHandle (jquery-1.6.4.js:2635)
更深入
希望这个警告会是最好的.看一点堆栈跟踪,我发现这个：console.trace();.这是非常有用的.
将其插入到26行的上面的代码中,如下所示：
if (x < 0)
throw new Error('factorial function doesn\'t support negative numbers');
else if (x === 0 || x === 1)
变
if (x < 0){
console.trace();
throw new Error('factorial function doesn\'t support negative numbers');
}else if (x === 0 || x === 1)
现在运行它,没有断点,将在满足错误条件时在控制台中生成堆栈跟踪：
console.trace() debugpage.html:27 factorial debugpage.html:27 documentReady debugpage.html:16 jQuery.extend._Deferred.deferred.resolveWith jquery-1.6.4.js:1016 jQuery.extend._Deferred.deferred.done jquery-1.6.4.js:1002 jQuery.fn.jQuery.ready jquery-1.6.4.js:282 (anonymous function) debugpage.html:11 jQuery.event.handle jquery-1.6.4.js:3001 jQuery.event.add.elemData.handle.eventHandle
