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?
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With