如何高效地逐步完成jQuery代码

How do you step through jQuery code efficiently?

本文关键字：jQuery 代码 何高效 高效      更新时间：2023-09-26

我已经用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()函数中。这里看起来像循环的只是函数调用的内部。
  • 如果我想知道为什么我在循环中得到一个虚假的高度值。有没有办法不通过大量的jQuery代码来解决这个问题?

那么，我在这里错过了什么?步进这类代码是不是不太方便?我是否错过了一些内置在jQuery框架中的神奇技术来帮助实现这一点?或者，使用这种样式库的代价是必须完全改变调试问题的方式。

这是你必须做的吗?

  • 在故障点为局部变量分配中间值，这样您就可以更容易地检查它们，而无需逐步使用jQuery函数。
  • 从一个断点移动到另一个断点，而不是一次执行一行。
  • 学习如何进入并通过jQuery调用(有效地)回答一些问题。

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

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

工具

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

  • FireQuery

FireQuery是一个与Firebug集成的Firefox扩展

    jQuery表达式被智能地呈现在Firebug控制台和DOM检查器中
  • 附加的jQuery数据是一等公民
    • jQuery集合中的
  • 元素在悬停
    • 时高亮显示
  • jQuerify:允许您将jQuery注入任何网页
  • jQuery Lint:使您能够在加载页面时自动注入jQuery Lint(非常适合临时代码验证)
  • 火力定位

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

    你不能逐行执行，否则你会在一大堆jQuery函数中结束。
  • 你不可能进入每个循环的内部，要么通过大量的jQuery的东西或设置一个断点，让它

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

  • 你不能看到任何中间值，如$(this)是什么，或者为什么它可能会得到一个虚假的高度值通过数英里的外部jQuery代码。

看http://msdn.microsoft.com/en-us/scriptjunkie/ee819093。这里解释了如何监视this内部(例如，"场景2"部分)。本文给出了许多调试使用jQuery的代码的技巧。

  • 您不能像在传统循环中那样(使用break或return)跳出每个循环，因为它不是一个实际的循环。循环在.each()函数中。这里看起来像一个循环的东西只是函数调用的内部结构。

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

  • 如果我想知道为什么我在循环中得到一个虚假的高度值。有没有一种方法可以不经过一个大量的jQuery代码?

也许你在上面解释的this之后会有更多的信息。但有时有必要查看jQuery代码，但我不经常这样做。当然，jQuery也可能存在bug。: - d

结论

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

。

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

我一直喜欢Firebug与JQuery一起工作。但一般来说，要进行更深入的调试，您必须学习JQuery。不过，JQuery确实有一个开发者版本。

我同意使用Firebug——在可能的情况下，我在Firefox中进行JS调试，因为Firebug非常好。

特别是，我倾向于使用watch功能，以确定我所发出的请求是否返回正确的结果。你也可以用this来标识$(this)或者任何你需要标识的东西，尽管默认显示的是"this"。

我经常做的另一件事是将我的JQ代码分割成比其他情况下更多的行，以帮助确定我在哪里。当我知道调用正常工作时，我经常会缩小JQ。

使用这些，调试JQ是可以的。但是，我同意，如果不逐级介绍JQ库会更容易。然而，这同样适用于我的后端代码的某些部分。

相关文章：