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

I wouldn't have thought a fiddle would help in this case as it's a very generic question... It would apply to any website that has js affecting css properties, right? — Vigintas Labakojis
– Vigintas Labakojis, Commented Apr 24, 2014 at 12:52
If the style added is unique enough, you may be able to search the codebase for some unique string from the style to significantly narrow your search, or even find the line outright. If the styles modify the inline style attribute on the element, you might also be able to get a dynamic breakpoint by right clicking the element in the dev tools Elements pane, and choosing Break on... > Attributes Modification. You might have to look up the call stack if it does hit the breakpoint to find your own code (as opposed to any potential library code responsible for the actual style change). — ajp15243
– ajp15243, Commented Apr 24, 2014 at 13:41
Bingo, "right clicking the element in the dev tools Elements pane, and choosing Break on... > Attributes Modification" is exactly what I was looking for... If you post that as an answer it will be accepted ;) — Vigintas Labakojis
– Vigintas Labakojis, Commented Apr 24, 2014 at 14:41

Alexander Pavlov · Accepted Answer · 2014-04-25 08:43:15Z

12

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.

answered Apr 25, 2014 at 8:43

Alexander Pavlov

32.4k5 gold badges71 silver badges95 bronze badges

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

Comments

Community · Accepted Answer · 2016-02-14 22:12:47Z

1

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.

edited Feb 14, 2016 at 22:12

CommunityBot

11 silver badge

answered Apr 24, 2014 at 12:53

jonode

8075 silver badges16 bronze badges

3 Comments

ajp15243 Over a year ago

It's possible this won't work. For instance, if the deleted target element is queried for in the handler (as opposed to, e.g., outside of it and using a closure for the handler to access it) in such a way that not finding it returns an empty node list, then there might not be an error, since the CSS change will just be acting on an empty node list and do nothing. It's still worth a try.

Vigintas Labakojis Over a year ago

You're right, deleting the target element causes no error. Worth a try though.

jonode Over a year ago

Is it jquery? You could possibly remove the link to the jquery file, then triggering it would issue an error since it would have no function.

Collectives™ on Stack Overflow

find javascript code that changes particular css properties

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related