我刚刚接触 jQuery 一段时间 - 使用 YUI 一段时间，虽然我真的很欣赏 jQuery 库提供的很多功能，但我发现逐步完成它非常痛苦调试器中的 jQuery 代码，我想知道除了显而易见的事情之外是否还有其他技巧？

像这样一个简单的函数:

function findFirstShortChild(parent) {
    var result = null;
    $("#" + parent + " li").each(function() {
        if ($(this).css("height") <= 10) {
            result = this;
            return(false);    // break out of each() function
        }
    });
    return(result);
}

如果函数没有按预期运行，而我决定逐步执行它，那么它根本就不直观。事实上，你根本无法真正跨过它。您将不得不在很多地方浏览各种 jQuery 代码。您不能进入 .each() 循环，因为它实际上不是传统循环。与其他库相比，我对调试器的效率低下感到惊讶。所以，这是我的问题:

• 您不能逐行执行，否则您将得到一大堆 jQuery 函数。
• 如果不经过大量 jQuery 操作或设置断点并让它到达断点，您就无法进入每个循环的内部。
• 您看不到像 $(this) 这样的任何中间值是什么，也看不到为什么它可能在不执行数英里的外部 jQuery 代码的情况下获得虚假的高度值。
• 您不能像在传统循环(使用 break 或 return)中那样跳出 each 循环，因为它不是真正的循环。循环在 .each() 函数内。这里看起来像循环的只是函数调用的内部结构。
• 如果我想知道为什么我在循环中得到一个虚假的高度值怎么办？有什么方法可以在不逐步执行大量 jQuery 代码的情况下解决这个问题吗？

那么，我在这里缺少什么？单步执行这种代码是不是很不方便？我是否遗漏了一些内置于 jQuery 框架中的神奇技术来帮助解决这个问题？或者你为使用这个样式库付出的代价是你必须完全改变你调试问题的方式。

这是你必须做的吗？

• 在出现问题的地方为局部变量分配中间值，这样您就可以更轻松地检查它们，而无需单步执行 jQuery 函数。
• 从一个断点移动到另一个断点，而不是一次单步执行一行。
• 了解如何(有效地)进入和通过 jQuery 调用来回答某些类型的问题。

你们是怎么做到的？我错过了什么？

我应该提一下，我在 FF5 中使用 Firebug，在 Chrome 中使用内置调试器(Chrome 现在比 Firebug 更常用)。而且，是的，我在调试时使用了 jQuery 的调试(非缩小)版本。所以，这不是您使用哪个调试器的问题，而是您如何使用调试器有效地逐步执行 jQuery 代码的问题。

最佳答案

工具

我正在使用 Firebug 调试 jQuery 代码和一些用于 jQuery 调试的扩展:

• FireQuery

FireQuery is a Firefox extension integrated with Firebug

• jQuery expressions are intelligently presented in Firebug Console and DOM inspector
• attached jQuery data are first class citizens
• elements in jQuery collections are highlighted on hover
• jQuerify: enables you to inject jQuery into any web page
• jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)

• FireFinder

Firefinder is an add-on to Firebug, to help find HTML elements matching chosen CSS selector(s) or XPath expression. You can also auto-select elements when hovering or via the context menu.

例子

• You can't step through line by line or you'll end up in a whole bunch of jQuery functions.
• You can't get into the inside of the each loop without either going through a lot of jQuery stuff or setting a breakpoint and letting it hit the breakpoint.

当我想进入 each 循环并逐步调试时，我在传递给 each 函数的函数中创建一个断点，然后我逐行调试，直到遇到 jQuery 代码。现在我在 jQuery 代码结束的位置创建了一个新的断点，我想继续调试。

• You can't see what any of the intermediate values like $(this) are or why it might be getting a bogus value for the height without stepping through miles of foreign jQuery code.

看http://msdn.microsoft.com/en-us/scriptjunkie/ee819093 .例如，解释了如何在 this 中观看(“场景 2”部分)。本文提供了许多如何调试使用 jQuery 的代码的技巧。

• You can't break out of the each loop like you do in a traditional loop (with break or return) because it isn't an actual loop. The loop is inside the .each() function. What looks like a loop here is just the internals of a function call.

我不明白这个问题。您可以通过返回 false 来跳出 each 循环。 当函数返回一次false 时，传递给each 函数的函数将不再被调用。

• What if I want to know why I'm getting a bogus height value in the loop. Is there any way to figure that out without stepping through a lot of jQuery code?

在查看了上面解释的 this 之后，您可能会获得更多信息。但有时需要查看 jQuery 代码，但我不经常这样做。当然，jQuery 中也可能存在错误。 :-D

结论

是的，调试 jQuery 有点不同。但我认为在稍微熟悉之后，您将修改 jQuery 的调试风格。与使用 jQuery 时节省的时间相比，从一个断点移动到另一个断点根本不算什么。

.

关于javascript - 如何高效地单步执行 jQuery 代码？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6716259/