How do you debug vanishing elements with Firebug/Dev Tools on your websites?

Question

How do you debug vanishing elements with Firebug/Dev Tools on your websites?

I have a div that disappears on mouseleave/out; I would like to explore this div with the debugger, but on my way to the firebug/debugger window, the div I want to inspect disappears.

Does anyone have tricks to achieve this?

EDIT: - It's not marked display: none, but removed from the DOM. Making this a bit challengier to find , if it's gone :-)

Answer 1

Reference this jsFiddle for an example of vanishing nodes on mouseout.

Note that some of the other answers won't handle/catch iFramed content. These two methods will...

As the OP said, the easiest way, to catch these elements, is to use firebug's Break On Mutate function.

---

Another easy alternative is just to save the file:

1. While hovering over the appropriate element with the mouse...

2. Press ControlS. The "Save As" function saves the generated code.
   For sites that override ControlS, such as jsFiddle, press AltF, then A (On Windows machines, anyway).

3. Open the saved code and you can see the fleeting element(s) there. iFramed content will be in the _files subfolder.

Answer 2

To debug vanishing element with DevTools, you can easily break on subtree & attributes modifications or node removal by selecting the element and in context menu select 'Break on...' (as shown below).

Alternatively you may try Visual Event or Visual Event 2 which can show you debugging information about events that have been attached to DOM elements. See: How to find event listeners on a DOM node?

Answer 3

1. Open Firebug.
2. Find the div in the markup.

Extra points if you use Ctrl + F to find it!