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

Question

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

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

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

编辑: - 它没有标记显示:无,但从DOM中删除.让它变得有点挑战,如果它消失了:-)

Answer 1

引用此jsFiddle以获取mouseout上消失节点的示例.

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

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

另一个简单的替代方法是保存文件:

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

2. 按ControlS."另存为"功能保存生成的代码.
   对于覆盖的站点 ControlS,例如jsFiddle,请按AltF,然后A(在Windows机器上,无论如何).

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

Answer 2

要使用DevTools调试消失元素,您可以通过选择元素轻松打破子树和属性修改或节点删除,并在上下文菜单中选择" Break on ... "(如下所示).

或者,您可以尝试Visual Event或Visual Event 2,它可以显示有关已附加到DOM元素的事件的调试信息.请参阅:如何在DOM节点上查找事件侦听器？

Answer 3

右键单击该元素以显示上下文菜单，然后单击“检查元素”。

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

http://jsfiddle.net/x3v3q/

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


$('*').unbind();

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

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

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

希望有帮助...