3

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

Mike
  • 3,348
  • 11
  • 45
  • 80
  • I recommend using breakpoints to step through the JavaScript source. – zzzzBov Nov 23 '13 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 Nov 23 '13 at 20:33
  • 3
    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 Nov 23 '13 at 20:41
  • You could make use of `MutationObserver` (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to create debugging code which will react on DOM element changes. –  Nov 23 '13 at 20:41
  • See http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener/11546242#11546242 – Alireza Fattahi Nov 23 '13 at 20:43
  • Start with isolating the offending javascript but commenting out scripts that do not affect that section of code. – otherDewi Nov 23 '13 at 20:54

1 Answers1

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

fflorent
  • 1,596
  • 9
  • 11