find javascript code that changes particular css properties - Stack Overflow

admin管理员组

文章数量:1316021

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'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

• javascript
• css
• google-chrome-devtools

Share Improve this question Follow asked Apr 24, 2014 at 12:48 Vigintas LabakojisVigintas Labakojis 1,06911 gold badge1515 silver badges2222 bronze badges 4

• can you share fiddle or any other link? – Atif Azad Commented Apr 24, 2014 at 12:49
• 3 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 Commented Apr 24, 2014 at 12:52
• 1 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 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 Commented Apr 24, 2014 at 14:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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.

本文标签： find javascript code that changes particular css propertiesStack Overflow