Chrome devtools DOM mutation events on page-reload?

Question

According to the documentation you can set breakpoints on DOM mutation by right click on the element and select "Break on..." > Subtree modifications.

This works really well bu I would like to set the breakpoint, then reload the page and watch for DOM modifications and then hit the breakpoint. The breakpoint doesnt seem to "stuck". This might be impossible, I dont know.

Any suggestions is appreciated. Thanks!

Answer 1

You can set a breakpoint on another script what run early. After this breakpoint fired you can set DOM breakpoint and let go the previous breakpoint.

Answer 2

In your page's markup, place this <script> tag:

<script>debugger</script>

It will trigger a breakpoint when the DOM parser gets to that point. This will enable you to place a new breakpoint on whatever event you want of the element. And, because you stopped it soon, it will (most likely) be before the event you're interested in has happened.