How to locate in Firebug which JavaScript Function changed the CSS?

Question

Firebug is probably the best debugging tool that makes the life easy for developers. But one thing that I am not able to find out is how do you locate the function that changed the CSS values. In the Right Panel, when you click on any CSS rule, it will select the HTML node in the left and you get to know that these values belong to this HTML element.

Is there any way that lets you find which javascript function modified the CSS. This is shown in firebug as

element.style{
  color:#898980;
  top:78px;
  bottom:121px;

}

I need to find which JS function changed the above values as it is not in my CSS.

The one highlighted in below Image

enter image description here

I recommend using breakpoints to step through the JavaScript source. — zzzzBov
– zzzzBov, Commented Nov 23, 2013 at 20:31
There are 1000's of JS lines in about 20 js files. Need to know where to put breakpoint. It is hard to put breakpoint on any js file without any Idea that that particular js file would be changing the CSS. — Mike
– Mike, Commented Nov 23, 2013 at 20:33
For Firefox, you can use Object.prototype.watch or a mutation observer to listen for changes to the style properties on the element in question, at which point you'd probably be able to trigger a stack trace which would hopefully provide some sort of insight as to what caused the change to the element. — zzzzBov
– zzzzBov, Commented Nov 23, 2013 at 20:41
You could make use of MutationObserver (developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to create debugging code which will react on DOM element changes. — user188654
– user188654, Commented Nov 23, 2013 at 20:41

fflorent · Accepted Answer · 2013-11-24 10:19:02Z

8

In the HTML panel, on the element whose style is changed : Right-click => break on attribute change.

This will break every time an attribute of this element is changed.

See also: http://www.softwareishard.com/blog/firebug/firebug-tip-break-on-html-mutation/

Florent

answered Nov 24, 2013 at 10:19

fflorent

1,66610 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to locate in Firebug which JavaScript Function changed the CSS?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related