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?
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?
Place a script tag with the debugger statement immediately after the element which gets its attribute changed:
<div></div>
<script>debugger</script>
DevTools will now highlight the code which changes the attribute.