How can I find the JavaScript that is setting the inline style of an element?

Question

I'm wondering of there is any way to find out where an inline CSS style came from. As you can see in the picture below, I have an element with an inline style that was generated using JavaScript. Sometimes my code seems to break and put the width to 0px, rendering the div invisible.

I've looked through all the JS files, but can't seem to find the error.

Is there a way to find the right file and line, just like dev tools does for css files?

Answer 1

Since you are using Chrome:

1. Right click on the element in the page and Inspect Element
2. Right click on the DOM inspector view of the element and Break on… → Attributes Modifications

When the inline style of the element is modified with JS, the debugger will trigger as if it had hit a breakpoint.

This will show you the relevant line of JS and give you a stack so you can figure out where that line was called from.

Answer 2

You can use chrome debugger/ firefox to inspect the element's style and its hierarchy.

Also if you don't want a style assigned by you to be overridden, you can use !important:

#element{

css-property:value !important;
}