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

Question

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

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

有没有人有诀窍来实现这个目标？

编辑： - 它没有标记为display：none，但已从DOM中删除。让它变得有点挑战，如果它消失了： - ）

Answer 1

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

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

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

---

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

1. 用鼠标悬停在适当的元素上...

2. 按 Control S 。 “另存为”功能可以保存 生成的 代码 对于覆盖 Control S 的网站，例如jsFiddle，请按 Alt F ，然后 A （无论如何，在Windows机器上）。

3. 打开保存的代码，您可以在那里看到转瞬即逝的元素。 iFramed内容将位于 _files 子文件夹中。

Answer 2

使用DevTools调试消失元素，您可以轻松地打破子树和＆amp;通过选择元素来属性修改或节点删除，并在上下文菜单中选择＆＃39; Break on ... ＆＃39; （如下图所示）。

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

Answer 3

1. 打开Firebug。
2. 在标记中找到div。

如果使用Ctrl + F查找它，可以加分！

Answer 4

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

Answer 5

右键单击元素以显示上下文菜单，然后单击“Inspect Element”。

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

http://jsfiddle.net/x3v3q/

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


$('*').unbind();

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

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

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

希望有帮助...