Determine which javascript function changes the page element at loading?

Question

I have a lot of jquery that works on page loading, and this causes one of my elements to disappear (which makes it style = display: none;). I assume that the jquery hide () function is applied to this element by mistake, but I cannot figure out which operator calls it.

Is there a javascript, firebug, etc. function or a tool that will essentially act as a breakpoint / listener for the html element (maybe one of them can be run in my browser)? It would be great to see which function affects this element when the page loads.

Answer 1

Huh! I just found the answer I wanted. Firebug has a “break on mutate” function in the HTML tab that will show you which line in the javascript file changes the html element. This is in Firebug 1.5, and the new update 1.5.2 released today moved the icon, so I noticed it and found it just luck!

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

Thanks for your trying guys!

Answer 2

You can find which element is accessed using getters / setters. However, the setter method doesn't seem to work with chrome ... it works with the latest minefield [firefox beta], though ... so you can check this out, I think =)

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 that will not allow you to "set" a variable. To do this, you define a dummy variable and set it. Then, when you define your getter [using __defineGetter__ ], you return that value