I want to see what code is modifying a DOM element on a webpage, so I set a breakpoint in Chrome by right-clicking on the element in the Elements tab of the DevTools inspector and choosing "Break on..." -> "Subtree Modifications". The script modifies the element when the page is loaded (and not after), so I want to preserve the DOM breakpoint and refresh the page.
The process for saving breakpoints in javascript code doesn't seem to apply to DOM breakpoints.
Set your breakpoints, switch to the Network tab and select the Preserve Log Upon Navigation toggle button. Now the breakpoints should be there when you refresh.
DOM Breakpoints can be useful when debugging DOM modifications in JavaScript. They are set by right-clicking on any DOM node preview or link, such as the DOM Tree in the Elements Tab, and choosing one of the items in the Break on submenu.
For now I added a debugger;
line before any other code runs, added a DOM breakpoint, and continued.
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