Question

我刚刚玩了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代码的情况下获得高度的虚假值。
你不能像在传统循环中那样突破每个循环（有中断或返回），因为它不是一个实际的循环。循环在.each（）函数内。看起来像循环的东西只是函数调用的内部。
如果我想知道为什么我在循环中获得虚假高度值该怎么办？有没有办法在没有单步执行大量jQuery代码的情况下解决这个问题？

那么，我在这里错过了什么？通过这种代码是不是很方便？我是否遗漏了jQuery框架内置的一些神奇技术来帮助解决这个问题？或者是您使用此样式库所付出的代价，您必须完全更改调试问题的方式。

这是你要做的吗？

将中间值分配给故障点中的局部变量，这样您就可以更轻松地检查它们，而无需单步执行jQuery函数。
从断点移动到断点，而不是一次一行地处理。
了解如何进入和通过jQuery调用（有效地）回答某些问题。

你们都是这样做的？我错过了什么？

我应该提一下，我在FF5中使用Firebug，在Chrome中使用内置调试器（Chrome现在比Firebug更频繁）。并且，是的，我在调试时使用jQuery的调试（非缩小）版本。因此，这不是关于您使用哪个调试器的问题，而是您如何使用调试器有效地逐步执行jQuery代码。

Answer 1

工具

我正在使用Firebug来调试jQuery代码，其中包含一些jQuery调试扩展：

FireQuery

FireQuery是与Firebug集成的Firefox扩展程序


jQuery表达式在Firebug Console和DOM检查器中智能显示

附加的jQuery数据是一等公民

jQuery集合中的元素在悬停时突出显示

jQuerify：允许您将jQuery注入任何网页

jQuery Lint：允许您在加载时自动将jQuery Lint注入页面（非常适合特殊代码验证）

FireFinder

Firefinder是Firebug的附加组件，用于帮助查找HTML元素匹配选择的CSS选择器或XPath表达式。你也可以悬停时或通过上下文菜单自动选择元素。

实施例

您无法逐行执行，或者最终会遇到一大堆jQuery函数。

如果没有经过很多jQuery的东西或设置断点并让它进入，你就无法进入每个循环的内部   点击了断点。

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

您无法看到任何像$（this）这样的中间值是什么，或者为什么它可能会为高度获取虚假值而没有   踏上数英里的外国jQuery代码。

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

你不能像在传统循环中那样突破每个循环（有中断或返回），因为它不是一个实际的循环。循环   在.each（）函数中。这里看起来像一个循环只是   函数调用的内部。

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

如果我想知道为什么我在循环中获得虚假高度值该怎么办？有没有办法在没有单步执行的情况下解决这个问题   很多jQuery代码？

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

结论

是的，调试jQuery有点不同。但是我想在经过一个小小的熟悉阶段之后你会修改jQuery的调试风格。从断点到断点的移动与使用jQuery时节省的时间相比毫无意义。

Answer 2

叫我老式的，但我倾向于严重依赖console.log('your choice of variable');，而且大多数时候它对我很有帮助。

Answer 3

我总是喜欢使用Firebug来处理JQuery。但一般来说，为了进行更深入的调试，是的，你必须进入JQuery。 JQuery确实有一个developerversion。

Answer 4

我同意使用Firebug - 我可以在哪里，我在Firefox中进行JS调试，因为Firebug非常好。

特别是，我倾向于使用监视工具，以确定我所做的请求正在返回正确的结果。您也可以使用它来识别$（this）或您需要识别的任何其他内容，但默认情况下会显示“this”。

我经常做的另一件事是将我的JQ代码拆分成比其他方式更多的行，以帮助识别我的位置。当我知道通话正在工作时，我认为经常缩小JQ。

使用这些，调试JQ就可以了。但是，我同意，如果没有介入JQ库会更容易。然而，同样适用于我的后端代码的某些部分。那就是生活。

如何有效地逐步执行jQuery代码？

4 个答案:

工具

实施例

结论