7

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

Matt
  • 25,943
  • 66
  • 198
  • 303
  • Are you actually removing the div from the DOM on mouseout? – idrumgood Jul 15 '11 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 Jul 15 '11 at 21:12

5 Answers5

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

Break on: Subtree & attributes modifications or node removal

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?

Community
  • 1
  • 1
kenorb
  • 155,785
  • 88
  • 678
  • 743
  • 1
    I am pretty sure this was not available when the question was first asked, glad I decided to wait until this week to search for an answer. Your answer was spot on and showed immediately the chain of calls involved in modifying at particular element. – Tommy Feb 16 '16 at 23:17
5

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.

enter image description here

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.

Brock Adams
  • 90,639
  • 22
  • 233
  • 295
  • Thanks Brock... great contribution – Homer6 Jul 20 '11 at 22:01
  • Just a tip when you want to save the file and you keep waiting forever: see the Net panel in Firebug whether you're not waiting for some unimportant external resources (css, font, image) on a slow/broken server. Actually, it is the case with JSFiddle right now ;) If so, use AdBlock Plus to block the problematic URL (AdBlock has always been my ultimate debugging tool!:) – jakub.g Mar 14 '12 at 10:08
2
  1. Open Firebug.
  2. Find the div in the markup.

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

citizen conn
  • 15,300
  • 3
  • 58
  • 80
  • This does not address the OP's problem. By the time these steps are followed, the node in question will have been removed from the DOM. – Brock Adams Jul 19 '11 at 01:21
  • that's actually not the case, he said the element disappears onMouseOut, not on page load. – citizen conn Jul 19 '11 at 01:23
  • Mouse over the appropriate element. Then "Open Firebug". *Poof*, the mouseout event is triggered and the element is gone. It has nothing to do with page load. – Brock Adams Jul 19 '11 at 01:29
  • my point exactly, so if he never mouses over, then he wont have that problem will he? I dont believe mouse over was one of my instructions. – citizen conn Jul 19 '11 at 01:31
  • I'm not sure that you understood the OP's question; he revised it to make it clearer after you answered. Go to this page: http://jsfiddle.net/FkGQT/1/ . Try to find the vanishing node with this answer's method. You can't. You can parse the JS for the node's source (sometimes), but that's not a practical approach in most situations. – Brock Adams Jul 19 '11 at 01:40
  • I still don't understand why it's so hard. http://tinypic.com/view.php?pic=a3d16e&s=7 – citizen conn Jul 19 '11 at 01:44
  • Yes, and [that picture](http://tinypic.com/view.php?pic=a3d16e&s=7) shows that you did not capture the fleeting node-- proving my point. – Brock Adams Jul 19 '11 at 04:02
2

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

Jason482
  • 197
  • 1
  • 10
1

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...

Homer6
  • 15,034
  • 11
  • 61
  • 81
  • This does not work on iFramed content, such as that jsFiddle. ...  Comment out the last line (see [jsfiddle.net/x3v3q/1/](http://jsfiddle.net/x3v3q/1/) ), then try to run `$('*').unbind();` from the Firebug console. It won't work. – Brock Adams Jul 19 '11 at 01:19
  • The reason I put it in jsfiddle is just so that he could run the example quickly. I didn't intend for him to place his code there. Anyways, I liked your answers as well. – Homer6 Jul 20 '11 at 22:02