在jQuery处理程序中抛出异常时,调用堆栈丢失

我在调试我的Web应用程序时遇到问题.这是非常令人沮丧的,因为我一直在尝试通过一个可以在jsfiddle上发布的小型网页来重现问题,但这似乎是“Higgs-Bugson”的一个例子.

我有一个带有大量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？

解决方法

我在调试我的Web应用程序时遇到问题

你使用什么类型的调试器？他们往往会有所不同,而且我发现最好的是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

在jQuery处理程序中抛出异常时,调用堆栈丢失

解决方法

相关推荐