How do you preserve Chrome DOM breakpoints on page refresh?

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

In Chrome, DOM breakpoints are not preserved upon refresh, they are thrown away, and then restored after the onload event. See bug report 571519, and this comment from that report:

We are preserving DOM breakpoints upon reload, but the breakpoints are only restored upon onload event. So if you expect breakpoint to trigger before that or it is set on a node that is added lazily, breakpoint is not restored. We should fix that though.

This is the workaround:

1. pause the Javascript, either with a normal breakpoint or with debugger; line of Javascript
2. remove all DOM breakpoints and add the DOM breakpoints that are needed
3. resume.

I believe this didn't have a proper explanation for the answer because I face the issue as well. the steps goes as follows.

• open developer tools by pressing console f12,
• you need to try to slow down your webpage rendering so you can be able to quickly pause javascript execution, the trick I use is to go to the network tab and set the online drop-down field to slow 3G so the pages become slower to render.
• select the sources tab then on the left sidebar check breakpoints and make sure all break points are removed, if there are still some breakpoints set then remove themclick on the pause execution button on your
• go back to your webpage and reload it, with the network set as slow 3g, your page becomes slower to render then you can quickly go back to sources and pause the execution the moment you can see your HTML dom is loaded. in this way your webpage is in a paused state
• go to your element tab, find the element you want to set breakpoint on and set it. then go back to sources tab and click continue execution this will make the execution stop at your element's break point