您如何在您的网站上使用 Firebug/Dev Tools 调试消失的元素？答案

【问题标题】：How do you debug vanishing elements with Firebug/Dev Tools on your websites?您如何在您的网站上使用 Firebug/Dev Tools 调试消失的元素？
【发布时间】：2011-07-15 20:56:15
【问题描述】：

如何在您的网站上使用 Firebug/Dev Tools 调试消失的元素？

我有一个在 mouseleave/out 时消失的 div；我想用调试器探索这个 div，但是在我去 firebug/debugger 窗口的路上，我想检查的 div 消失了。

有没有人有办法做到这一点？

编辑： - 它没有标记为 display: none，但已从 DOM 中删除。如果它不见了，这会让它变得更难找到:-)

【问题讨论】：

您是否真的在鼠标移出时从 DOM 中删除了 div？
是的，这就是为什么当我离开浏览器并进入 de=bugger 检查源时，该项目已从 dom 中删除。但是，我在 HTML 窗格中发现了 firebug 'Break on Mutate' 按钮。

标签： javascript html debugging firebug developer-tools

【解决方案1】：

参考this jsFiddle for an example of vanishing nodes on mouseout。

请注意，其他一些答案不会处理/捕获 iFramed 内容。这两种方法...

正如 OP 所说，捕捉这些元素的最简单方法是使用 firebug 的 Break On Mutate 函数。

另一个简单的选择就是保存文件：

当用鼠标悬停在适当的元素上时...
按 ControlS。 “另存为”功能保存生成的代码。
对于覆盖 ControlS 的站点，例如 jsFiddle，按 AltF，然后是 A（无论如何，在 Windows 机器上）。
打开保存的代码，您可以在其中看到转瞬即逝的元素。 iFramed 内容将位于 _files 子文件夹中。

【讨论】：

感谢布洛克...伟大的贡献
当你想保存文件并且你一直在等待时只是一个提示：查看 Firebug 中的 Net 面板是否你不是在等待一些不重要的外部资源（css、字体、图像）缓慢/损坏的服务器。实际上，现在 JSFiddle 就是这种情况；）如果是这样，请使用 AdBlock Plus 来阻止有问题的 URL（AdBlock 一直是我的终极调试工具！:)

【解决方案2】：

要使用 DevTools 调试消失的元素，您可以通过选择元素并在上下文菜单中选择“Break on...”轻松中断子树和属性修改或节点删除（如下所示） .

您也可以尝试Visual Event 或Visual Event 2，它们可以显示有关已附加到 DOM 元素的事件的调试信息。见：How to find event listeners on a DOM node?

【讨论】：

我很确定在第一次提出问题时这不可用，很高兴我决定等到本周再寻找答案。您的回答很准确，并立即显示了修改特定元素所涉及的调用链。

【解决方案3】：

打开 Firebug。
在标记中找到 div。

使用Ctrl+F查找加分！

【讨论】：

这并没有解决 OP 的问题。在执行这些步骤时，相关节点将从 DOM 中删除。
实际情况并非如此，他说元素在MouseOut 上消失，而不是在页面加载时消失。
将鼠标悬停在适当的元素上。然后“打开 Firebug”。噗，mouseout事件被触发，元素消失。它与页面加载无关。
我的观点完全正确，所以如果他从不将鼠标悬停，那么他不会有这个问题，对吗？我不相信鼠标悬停是我的指示之一。
我不确定您是否理解 OP 的问题；在您回答后，他对其进行了修改以使其更清楚。转到此页面：jsfiddle.net/FkGQT/1。尝试使用此答案的方法找到消失的节点。你不能。您可以解析 JS 以获取节点的源（有时），但在大多数情况下这不是一种实用的方法。

【解决方案4】：

Ctrl + Shift + C 是 Inspect Element 的快捷键组合。来自FireBug Wiki。

【讨论】：

【解决方案5】：

右键单击元素以调出上下文菜单，然后单击“检查元素”。

更新：解决元素从 DOM 中移除而不是隐藏的事实。

http://jsfiddle.net/x3v3q/

$('#mydiv').mouseout(function(){
    alert('hi');    
});


$('*').unbind();

使用 jQuery，您可以取消绑定页面上所有元素的所有事件。如果您运行 jsfiddle 代码，您可以看到在注释“unbind”时它可以工作。但是运行“取消绑定”会从元素中删除所有事件处理程序。

如果您从 firebug 控制台运行 unbind，则在删除元素之前，您可以右键单击并“检查元素”或使用其他建议之一来检查它。

如果页面没有加载 jQuery，您可以安装 FireQuery 插件并按“jquerify”将 jQuery 注入尚未加载的页面中。见https://addons.mozilla.org/en-US/firefox/addon/firequery/

希望对您有所帮助...

【讨论】：

这不适用于 iFramed 内容，例如 jsFiddle。 ... 注释掉最后一行（参见 jsfiddle.net/x3v3q/1/ ），然后尝试从 Firebug 控制台运行 $('*').unbind();。它不会起作用。
我把它放在jsfiddle中的原因只是为了他可以快速运行这个例子。我不打算让他把他的代码放在那里。不管怎样，我也喜欢你的回答。