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?

Answer 1

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

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>