Figuring out which JavaScript set a given CSS property

Question

I am debugging a complex Front End HTML GUI and at some point some JavaScript adds a CSS property to an element, which shouldn't be there.

I am looking for a way to see which JavaScript code (in terms of file and line number) amended the given (in this case style) property so I can debug it further.

Since the JS code is enormous searching the code is not practical. I need some way to bind to property change events and see who changed them.

@aavrug The file is several thousand lines of code long and is partially obfuscated. Searching the source is not practical. I need some way to bind to property changes and see who changed them. — Itay Grudev
– Itay Grudev, Commented Jan 2, 2017 at 10:46
@Caelan That is irrelevant since the question should be universal. — Itay Grudev
– Itay Grudev, Commented Jan 2, 2017 at 11:24

Mifort · Accepted Answer · 2017-01-02 10:49:40Z

1

Right click on html element in Chrome Devtools => Break on => Attributes Modifications. It make code to stop on a point when css property is changed by javascript. If it will stop inside library that changes the css than use the Sorces => Call Stack (at the right) of Devtools toget to the piece of code that calls the library to change css.

answered Jan 2, 2017 at 10:49

Mifort

2672 silver badges6 bronze badges

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

2 Comments

Itay Grudev Over a year ago

That's neat. Is there a way to save those between page reloads?

Itay Grudev Over a year ago

I can just add a break point in the beginning of my JS so I can add the attr break point before the JS is ran.

Collectives™ on Stack Overflow

Figuring out which JavaScript set a given CSS property

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related