find javascript code that changes particular css properties

css, google-chrome-devtools, javascript

Solution

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.

Problem

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

Original source