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 fil

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>