您如何在您的網站上使用 Firebug/Dev Tools 調試消失的元素？

Question

您如何在您的網站上使用 Firebug/Dev Tools 調試消失的元素？

我有一個在 mouseleave/out 時消失的 div； 我想用調試器探索這個 div，但是在我去 firebug/debugger window 的路上，我想檢查的 div 消失了。

有沒有人有實現這一目標的技巧？

編輯： - 它沒有標記為顯示：無，但已從 DOM 中刪除。 如果它不見了，這會讓它變得更難找到:-)

Answer 1

要使用 DevTools 調試消失的元素，您可以通過選擇元素並在上下文菜單 select ' Break on... ' 中輕松中斷子樹和屬性修改或節點刪除（如下所示）。

或者，您可以嘗試Visual Event或Visual Event 2 ，它可以向您顯示有關已附加到 DOM 元素的事件的調試信息。 請參閱：如何在 DOM 節點上查找事件偵聽器？

Answer 2

參考此 jsFiddle 以獲取 mouseout 上消失節點的示例。

請注意，其他一些答案不會處理/捕獲 iFramed 內容。 這兩種方法將...

正如 OP 所說，捕捉這些元素的最簡單方法是使用螢火蟲的Break On Mutate function。

---

另一個簡單的選擇就是保存文件：

1. 將鼠標懸停在適當的元素上時...

2. 按控制S。 “另存為”function 保存生成的代碼。
   對於覆蓋Control S的站點，例如 jsFiddle，按Alt F ，然后按A （無論如何，在 Windows 機器上）。

3. 打開保存的代碼，您可以在那里看到稍縱即逝的元素。 iFramed 內容將位於_files子文件夾中。

Answer 3

1. 打開螢火蟲。
2. 在標記中找到 div。

用Ctrl+F找加分！

Answer 4

Ctrl + Shift + C 是 Inspect Element 的快捷鍵組合。 來自FireBug 維基。

Answer 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/

希望有幫助...