Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you preserve Chrome DOM breakpoints on page refresh?

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.

breakpoints

like image 719
celeritas Avatar asked Dec 16 '15 00:12

celeritas


People also ask

How do I save breakpoints in Chrome?

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.

What are Dom breakpoints?

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.


1 Answers

For now I added a debugger; line before any other code runs, added a DOM breakpoint, and continued.

like image 169
celeritas Avatar answered Oct 13 '22 17:10

celeritas