Finding Javascript-Applied Inline Styles to Debug Javascript

Question

SCENARIO: I am taking over management of a website where the former web developer has unfortunately spread out many relevant functions over many long JS files. It is hard for me to find where an inline CSS style is coming from in the JS or what function is applying this style directly to the element.

QUESTION: Is there a method of reverse engineering an element's inline styles to see where they are coming from?

I know this is like asking to see the eggs of a cake that is already baked. But I'm hopeful that there is a way. — JLF
– JLF, Commented Apr 15, 2015 at 18:26
If using chrome, Ctrl+Alt+i (on windows), select the element who style you want to look up, see the styles panel exactly where it comes from — BadFeelingAboutThis
– BadFeelingAboutThis, Commented Apr 15, 2015 at 18:27
@LDMS If using Chrome, how could I use the inspector to do that? — JLF
– JLF, Commented Apr 15, 2015 at 18:27

Ruan Mendes · Accepted Answer · 2015-04-15 18:38:21Z

37

A possible way is to add a DOM breakpoint in Chrome Dev Tools

enter image description here

For that to work, you have to add the breakpoint before the style is added. That can be tricky, but you can force a breakpoint before loading any JavaScript by adding the following immediately after the HTML element in question

<script>debugger</script>

Try it on the following code

Click on the "Run Code Snippet" button below
Open Dev Tools
Right click the paragraph
Select Break On... -> Attribute modifications
Click the "Add border color" button
Voila, your debugger stops at the code that is modifying the style

window.onload = function() {
    document.querySelector('button').addEventListener('click', function() {
         document.querySelector('p').style.border = '2px solid red';    
    });
}

<p> Sample Paragraph </p>
<button>Add border color</button>

edited Apr 15, 2015 at 18:38

answered Apr 15, 2015 at 18:29

Ruan Mendes

92.7k31 gold badges162 silver badges225 bronze badges

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

5 Comments

Kayce Basques Over a year ago

Tip: Set a single Subtree Modifications DOM breakpoint on a top-level node, like the body, and a breakpoint will get triggered whenever any of its children are modified.

Ruan Mendes Over a year ago

@KayceBasques Not sure it's a good idea, you will get flooded with breakpoints. For this question, the OP wants to know specifically when a specific element is about to be modified. Your suggestion may be valid in other contexts but not for this question as asked. From the OP an inline CSS style is coming from in the JS or what function is applying this style directly to the element.

Kayce Basques Over a year ago

@JuanMendes Right. Depends on the context. It's useful when you don't have a lot of nodes getting modified, though.

Vadim Anisimov Over a year ago

But what to do, if the element is 'styled' at the very load of the page? All DOM breakpoints are reset in this case...

Ruan Mendes Over a year ago

@VadimAnisimov You didn't read the full answer?

For that to work, you have to add the breakpoint before the style is added. That can be tricky, but you can force a breakpoint before loading any JavaScript by adding the following immediately after the HTML element in question <script>debugger</script>

Collectives™ on Stack Overflow

Finding Javascript-Applied Inline Styles to Debug Javascript

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related