Tracking Down JavaScript that Applies Inline Style on Page Load

Question

I'm managing a DNN site and trying to find the source of a "width: 100%" inline style being applied to certain elements on my home page. There's a whole mess of JS libraries included in DNN that are difficult to manually parse through, but I've popped open Chrome Developer Tools and searched in the Sources tab for every JS file that loads on the page to see where "100%" is being used. No dice.

I'm aware of the Break on... > Attributes Modifications functionality. This was always cited as the solution for similar issues I found on SO:

How to track down javascript that is modifying the inline style of a div in the DOM?

Finding Javascript-Applied Inline Styles to Debug Javascript

How can I find out what script is setting my element's visibility to hidden?

Which JS added inline styles?

The problem is this that unlike debugging JavaScript in the Sources tab, the debug point on HTML elements in the Elements tab gets wiped when you refresh the webpage, and the script I'm trying to track down only runs once on page load and never again during runtime, so the breakpoint never gets hit.

Are there any other methods of identifying when or where the attributes on a specific element in the DOM change during page load? Or maybe tracking a specific attribute?

Arbitrament

I just tested the "Break on... > Attributes Modifications" option with a refresh and it's still there after the refresh. Have you tried restarting your browser or making sure that the URL isn't changing between refreshes? – Quodlibet

@MikeC Positive. URL does not change. Before and After images of the dev tools: imgur.com/a/CoUjq – Arbitrament

Can you try removing the libraries one by one until you pin down the culprit? – Baikal

Answer 1

1. Place a script tag with the debugger statement immediately after the element which gets its attribute changed:

   <div></div>
   <script>debugger</script>
   

2. Reload the page with the inspector open
3. Switch to the elements tab and add an attribute removal breakpoint to the element
4. Resume script execution

DevTools will now highlight the code which changes the attribute.

Luciano

The element whose attribute is changing is rendered via a DNN HTML module. If I attempt to add any <script> tags to this content area, DNN just strips them out during the module saving process. I CAN add scripts to the "header" and "footer" of the module, so I tried adding <script>debugger</script> to the footer (some point after the HTML element, though not immediately following it), and this does get the breakpoint to stick (the circle icon persists upon refreshing), but all DevTools stops on is the <script>debugger</script> line I just added, and not anywhere in the Elements tab. – Arbitrament

I found the source... I honestly couldn't tell you how, though. For one brief moment the debugger stopped somewhere in the jquery.js library and I tried to recall from memory where it was, set a breakpoint there, and (slowly) iterated through the hundreds of elements that passed by it... when my problematic element finally came up, I traced through the call stack found my way to the source: a minified JS plugin that DevTools temporarily de-minified for me. That explains why I never found "100%" in plain text in the offending file. – Arbitrament

@Arbitrament - I'm facing something similar now. I'm working with a legacy framework which has reams and reams of js code and there is a line somewhere which is applying styling to all input elements and setting the height. Absolute nightmare. – Sennacherib

Answer 2

Due to my low reputation I need to create m an answer for this, instead of an comment.

If

Break on... > Attributes Modifications

isn't working for you and the solution by @metarmask does not help you either have a look at your Plug ins in your browser. I had the same issues and just deactivated all Plug ins and suddenly everything worked fine with using a breakpoint.

Decoder