How to break when DOM element gets removed from its parent?

0
votes

I need a little help using the Chrome debugger.

I have a bug where a canvas element is getting inadvertently removed from its parent div. I can't find the piece of code that's doing it. I wanted to set a breakpoint when the canvas element gets removed or when the parent div element has an element removed from it. I set all the "break on" features for both the parent div and the child canvas but none of them get fired. Nevertheless, I observe that after executing the repro steps, the canvas is missing and that its parentElement becomes null.

Clarification: By "break on" features I mean: subtree modifications, attribute modifications, and node removal for both the parent div and the child canvas

<div>
    <canvas>
</div>

How can I set a breakpoint to find the offending code by catching it red-handed in the act of removing the canvas?

1
google-chrome-devtools

1 Answers

1
votes

Use DOM Change Breakpoints.

DOM Change Breakpoint

Setting a subtree modification breakpoint on the div should do the trick.