find javascript code that changes particular css properties

Question

I'm trying to debug some styling issues on a site that has tons of .js files included. One of those scripts adds some css properties to an input element on click.

Is there an easy way to find which script and which part of it alters those css properties using Chrome Developer Tools?

Chrome Version 34.0.1847.116

Answer 1

In the Elements panel, right-click the element in question, and in the context menu choose Break on... > Attributes Modifications. Next time its style attribute is changed, the debugger will break on the corresponding JS line.

Answer 2

Use the developer tools to delete the element that changes on click. Then click the element that triggers the change. Since it can't be changed it will issue an error. The error will have a link on the right to show you exactly where it broke.

This should produce the exact file and function/script.

So say this is your element <div class="bob">Apple</div> and on click, Js adds style="color:red;" by deleting .bob you will break the script.

Note: Use developer tools to delete it. That way it doesn't permanently mess with your project.

Note2: Before deleting it, try just editing it and changing its id and/or class, like "xxbob", so it will no longer be recognized by the code.