see where a dom element is emptied by javascript

Question

This is mostly a question about debugging ... i have a very big JavaScript file, that somewhere inside it , it removes (empty()) a certain element. i tried to check that element for id , class in the JavaScript but couldn't find it so maybe is using some other selector based on some logic.

The question : is there a way to see where a certain element with an id , is removed / emptied by chrome and pause at that line ?

Or is there a feature regarding this matter if somebody else had the same problem in the past ?

the thing is that ... this element is emptied once after the full dom loads .. so i can check it only on refresh ,.,.. — 123onetwothree
– 123onetwothree, Commented Sep 4, 2017 at 12:54
Place a break point on document ready or any other place before the DOM is emptied and then when paused add the DOM breakpoint. I also remember DOM Breakpoint is persisted across page refresh too. But not too sure. — Ramesh
– Ramesh, Commented Sep 4, 2017 at 13:02

Ramesh · Accepted Answer · 2017-09-04 12:54:38Z

1

You can set a breakpoint on DOM which would show the stack trace which modified the element.

To set a DOM change breakpoint:

Click the Elements tab in chrome developer tools.
Go the element that you want to set the breakpoint on.
Right-click the element. Hover over Break on then select Subtree modifications, Attribute modifications, or Node removal.

More Information : https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#dom

answered Sep 4, 2017 at 12:54

Ramesh

13.3k4 gold badges55 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Add a breakpoint on the node removal option, it might help you

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 4, 2017 at 12:55

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

3 Comments

123onetwothree Over a year ago

yes but when i refresh ... i cannot see them setup . i can only test on refresh

123onetwothree Over a year ago

ok ... after refresh that breakpoint is still on .. but it does not break .. and clearly the node is emptied .. i can see content for a split second inside that div .. and if i manage to stop the browser right in time i can see all content

Renzo Calla Over a year ago

the breakpoint will only fire if the element is removed, try adding subtree modifications, that will watch through its childs

Collectives™ on Stack Overflow

see where a dom element is emptied by javascript

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related