7

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

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

有没有人有实现这一目标的技巧？

编辑： - 它没有标记为显示：无，但已从 DOM 中删除。如果它消失了，这会让它变得更难找到:-)

4

5 回答 5

5

参考此 jsFiddle 以获取 mouseout 上消失节点的示例。

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

正如OP所说，捕捉这些元素的最简单方法是使用萤火虫的Break On Mutate功能。

在此处输入图像描述

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

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

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

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

于 2011-07-19T01:13:49.647 回答
5

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

中断：子树和属性修改或节点删除

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

于 2016-02-08T15:54:38.307 回答
2
  1. 打开萤火虫。
  2. 在标记中找到 div。

用Ctrl+F找加分！

于 2011-07-15T20:59:49.900 回答
2

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

于 2011-07-15T21:00:40.670 回答
1

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

更新：为了解决元素被从 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/

希望有帮助...

于 2011-07-15T21:05:44.393 回答