Detect what javascript function is changing a page element on load?

Question

Hey! I have lots of jquery that is running on page load and it's causing one of my elements to disappear (making it style=display:none;). I'm guessing the jquery hide() function is being applied to this element by mistake, but I can't find out which statement is causing it.

Is there any javascript,firebug,etc function or tool that will essentially act as a breakpoint/listener for the html element (perhaps one I can run in my browser)? It would be great to see what function is affecting that element on page load.

Thanks!

Answer 1

You can find where the element is being accessed with getters/setters. However, the setter method doesn't seem to work with chrome... it works with the latest version of minefield [firefox beta], though... so you could test it out I guess =)

myElement.style.__defineSetter__("backgroundColor", function(val)
{
  var cur = arguments.callee;
  var callLog = "";
  while(cur != null)
  {
   callLog = cur.caller + "\n" + callLog;
   //alert(cur.caller);
   cur = cur.caller;
  }
  alert(callLog);
 }
);

Oh, but it won't let you actually "set" the variable. to do that, you define a dummy variable and set that. Then, when you define your getter [with __defineGetter__] you return that value

Answer 2

Hah! I just found the answer I wanted. Firebug has a "break on mutate" function on the HTML tab that will show you what line in the javascript file is changing an html element. It is in Firebug 1.5 and the new 1.5.2 update released today moved the icon, so I noticed it and found it purely by luck!

http://www.softwareishard.com/blog/firebug/firebug-15-break-on-next/

Thanks for your attempts guys!