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 :-)

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 :-)

• javascript
• html
• debugging
• firebug
• developer-tools

• Are you actually removing the div from the DOM on mouseout? – idrumgood Commented Jul 15, 2011 at 21:07
• Yeah, that's why by the time I get out of the browser and into the de=bugger to inspect the source, the item is removed from the dom. However, I found the firebug 'Break on Mutate' buutton in the HTML pane. – Matt Commented Jul 15, 2011 at 21:12

5 Answers 5

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?

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.

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

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

Ctrl + Shift + C is the shortcut key combo for Inspect Element. From the FireBug Wiki.

Right-click on the element to bring up the context menu and click "Inspect Element".

UPDATE: To address the fact that the element is being removed from the DOM and not hidden.

http://jsfiddle.net/x3v3q/

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


$('*').unbind();

Using jQuery, you can unbind all of the events on all of the elements on the page. If you run the jsfiddle code, you can see that it works when "unbind" is commented. But running "unbind" removes all event handlers from an element.

If you run the unbind from the firebug console, before the element is removed, you can right-click and "Inspect Element" or use one of other suggestions for inspecting it.

If the page doesn't have jQuery loaded, you can install the FireQuery plugin and press "jquerify" to inject jQuery into a page that doesn't have it load already. See https://addons.mozilla.org/en-US/firefox/addon/firequery/

Hope that helps...