如何通过 jQuery 调试 DOM 操作？答案

【问题标题】：How to debug DOM manipulation by jQuery?如何通过 jQuery 调试 DOM 操作？
【发布时间】：2012-08-02 16:34:41
【问题描述】：

我正在开发一个包含一些动态 jQuery 内容的网站。如果用户在页面上按下按钮（“显示菜单”），就会运行一个 javascript 函数。让这个函数调用loadMenu()。

loadMenu() 函数使用 ajax 从服务器加载菜单（网络内容）。此加载代码的一部分是 javascript/jquery。此代码的 2 个函数使页面上的某些元素可拖动，另外 2 个函数使网页上的某些元素可拖放。这些函数都是在 $.ready-Time 开始的（如果 DOM 准备好了）。这一切都很好。

现在我添加了“MenuAlwaysVisible”功能。这意味着：如果网页正在加载并完成（ready），用户不需要按下“显示菜单”按钮，因为如果页面是 readyloadMenu() 现在会自动触发/p>

现在的问题是，看起来可拖动的处理程序已附加并按定义工作，但可放置的处理程序不起作用。

我不确定，但可能droppable 函数在某个时间运行，DOM 元素不喜欢可放置？或者也许其他一些 jQuery 代码会覆盖这个？（但页面上没有其他可放置的元素）？

所以问题是：如何分析这个问题：如何调试 DOM 操作，使用 Windows 和 Firefox/Firebug 或 Safari、Chrome ......随便......

谢谢！

【问题讨论】：

getfirebug.com/javascript -- 听起来你只需要学习如何使用逐步调试器。
@mblase75 谢谢你的链接 - 我现在就读这个:-)
@mblase75 逐步调试器很奇怪（我认为）。看起来，当浏览器读取脚本时，所有功能都被触发了。（在“脚本解析时间”处停在我的断点处）另一方面，如果加载页面完成，应用程序会挂起，所以我看不到此时会发生什么，当应用程序真正调用功能。 :-/
逐行使用javascript调试器需要很多时间来适应，坦率地说，我还没有习惯。但是，如果您的代码作为事件被触发，它仍然无法让您清楚地了解正在发生的事情。也许使用 dev.tools 中的时间线可以帮助您解决这个问题。一种不太复杂的方法是在各个点使用console.log(string)，因为它们会按照它们出现的顺序立即显示在控制台中，而不会像alert() 那样中断任何事情。您还可以将整个对象写入console.log，而不仅仅是字符串。

标签： javascript jquery debugging droppable dom-manipulation

【解决方案1】：

我发现一个对处理 JQuery 非常有用的调试技巧是插入明显代码技巧。在页面的一些明显的、可识别的部分上添加一个 .hide() 命令，然后查看代码是否运行过。让您可以跟踪哪些代码段未按预期运行，哪些代码段根本就没有被使用过。

【讨论】：

为什么不直接在控制台记录一些东西？
在阅读您的评论之前，我不知道控制台的存在。还是不知道怎么写。怀疑不是所有浏览器都可用。
它在 FF、Chrome 和 IE8+ 上可用。你用console.log(value);给它写信如果你想在其他浏览器中使用控制台，你可以使用Firebug lite。
>让您跟踪哪些代码片段未按预期运行 --- 重点是：它们都按要求工作，因为使用“显示菜单”按钮可以正常工作。问题与脚本开始的时间有关。
好吧，在那种情况下，我会说迈克尔对控制台的建议非常强烈。将 console.log() 标签放在代码的各个部分（确定它们在代码中的位置），一个放在脚本的开头，另一个放在脚本的末尾。运行一次，控制台应该会告诉您事情发生的顺序。逐步调试器也可以工作（并且对于单次运行可能更快），但是这种方式可以让您重复运行，每次运行的成本相对较低- 允许调整和重新检查。

【解决方案2】：

回答我自己的问题：除了使用 firebug 和 console.info() 或 console.warn() 来调试代码之外，我没有找到任何替代方法。谢谢@大家的cmets

【讨论】：

尝试将debugger; 放入javascript 代码中。看看有没有帮助。